# Angular.js-project

**Repository Path**: rapid-start/Angular.js-project

## Basic Information

- **Project Name**: Angular.js-project
- **Description**: Angular.js原型项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-02
- **Last Updated**: 2025-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# [Angular.js](https://github.com/rapid-start/Angular.js)
Angular.js原型项目

<p>
    <a href="https://github.com/rapid-start/Angular.js" target='_blank'>
        <img alt="GitHub repo stars" src="https://img.shields.io/github/stars/rapid-start/Angular.js?style=social">
    </a>
</p>

## 如何使用

开发的时候运行下列命令：

```
npm run dev
```

开发完毕需要发布的时候，请运行下列命令：

```
npm run build
```

## 项目说明

首先看看目录结构：

    - build 打包后的公共JS和CSS文件，用于生产环境
    - htmls 交易代码主要在这里开发
    - images 图片资源
    - libs 公共的JS一般存放在这里
      - min 一般存放angular、jquery等最基本的公共第三方JS
      config.js 项目启动入口，包括路由、请求等配合和公共方法等（备注：当然可以拆分成多个文件）
      preload.js 帮忙加载资源的，用于开发环境
    - styles 样式CSS文件
    .csslint css语法校验规则
    .jshintrc js语法校验规则
    Gruntfile.js 打包插件Grunt.js配置文件
    index.html 项目入口（这里打开以后会首先运行项目启动入口）
    jshint.debug.txt js语法校验结果（css的会直接打印在控制台）
    package.json 项目信息，依赖的包和脚本都配置文件

接着我们来说说项目启动过程：

首先，会从config.js开始执行，前面说了，这是启动入口，在这里主要就干了二件事：

- 使用```angular.module```方法定义模块:不同模块拥有不同功能，可以设置依赖关系，主模块只有一个，也就是项目入口```index.html```中```<XXX ng-app="startApp">```定义的，表示框架对这块区域进行管理。
- 配置模块：$rootScope上的方法，路由等都属于配置模块

模块定义并配置好以后，在本项目中是设置的自动启动（手动启动：angular.bootstrap(XXX,['startApp']);}），也就是```ng-app="startApp"```这段代码。

启动过程为了方便理解，可以划分成二步：

- 第一步：挂载公共的指令，过滤器，服务等
- 第二步：解析控制区域模板并生效：简单的理解就是框架理解管理区域有什么，然后让你写的生效（比如你用了某个指令，那就根据你定义的指令，生效等）

以上就大概是全部了，只不过上面的启动过程，其实是不断重复的过程，比如打开新的页面，会挂载新的控制器，然后解析模板并生效，如此往复，直至网页关闭。

## 版权

MIT License

Copyright (c) [zxl20070701](https://zxl20070701.github.io/notebook/home.html) 走一步，再走一步