Angular1.x 基础入门

一、Angular1.x概述

• 致力于单页面应用（single page application）

• 不直接操作DOM元素，数据驱动为核心，以操作数据完成页面的一系列

二、Angular1.x特点

MVC

• MVC模式

  Model：模型，业务数据，存储于特定作用范围内的变量

  View：视图，负责页面的展示，HTML + directive

  Controller：控制器，在controller中声明模型数据可以实现模型和视图的分离

• MVC实现

  1. 声明自定义模块

     angular.module('模块名',[依赖列表])

  2. 把自定义模块注册到当前应用

     ng-app='模块'

  3. 模块中声明控制器函数

     module.controller('控制器名'，function（）{...})

  4. 调用控制器函数、创建控制器对象

  5. 在控制器中对数据进行一系列的操作

     $scope.a=b

  6. 在view中呈现数据

     {{a}}

数据双向绑定

Angular的双向数据绑定是基于脏检测（dirty checking）。dirty checking指的是对比新旧两个数据值，如果发生变化就更新。dirty checking的核心函数是$digest()。当下列事件发生后会进行dirty checking。

• DOM事件（click、keyup）

• XHR响应

• 浏览器Location变化

• Timer事件（setTimeout和SetInterval）

• 手动执行$digest()和$apply()

  Model ——> View : $scope下的变量发生变化时，执行DOM更新

  View ——> Model : 监听DOM事件，在事件处理程序中改变$scope下的变量

依赖注入（Dependency Injection，简称DI）

依赖注入步骤

• 得到模块依赖项

• 查找依赖项对应的对象

• 执行时注入

模块化设计

Angular将整个项目按照功能等区分规则进行模块的划分，将项目分成大大小小的功能模块以及许多能够复用的功能模块。

Angular.module(name,[,requires])

ng–app = "name"

1. 作用：

   • 定义一个应用程序

   • 模块是应用程序中不同部分的容器

   • 模块是应用控制器的容器，控制器必须属于一个模块

2. 优点

   • 保持全局命名空间整洁

   • 使应用可以按照任意顺序加载代码

三、Angular项目目录结构

项目根目录

| e2e

| src

| app.e2e-spec.ts

| app.po.ts

| tsconfig.e2e.json

| protractor.config.js

| node_modules

| src

| app

| app.component.css

| app.component.html

| app.component.spec.ts

| app.component.ts

| app.module.ts

| assets

| .gitkeep

| environments

| environment.prod.ts

| environment.ts

| browserlist

| favicon.ico

| index.html

| karma.confi.js

| main.ts

| polyfills.ts

| styles.css

| test.ts

| tsconfig.app.json

| tsconfig.spec.json

| tslint.json

| .editorconfig

| .gitignore

| angular.json

| package.json

| Readme.md

| tsconfig.json

| tslint.json

| protractor.conf.js