1.MVC基本概念

   M：model,模型，数据。

   V：view，视图，就是如何展示数据。

   C：controller，控制器，数据与展示的联系（连接数据与视图的桥梁），是主要的代码逻辑区域。

   作用：使代码分工明确，可以根据不同的分块进行单独处理

ng代表angular 

2.angular是什么？

     *：ng是一个处理单页面应用程序的框架，他扩展了原有的html,使用标签模板指令等方法去实现动态的单页面应用程序。

     *：单页面应用程序：整个页面站点，无论是什么页面内容都是一个html文件，在html文件的内部操作数据的显示与变化，所有的数据改动不再使用刷新的方法，而是利用ajax和dom操作在界面上进行调整

     *：ng不推荐在代码中使用DOM操作，因此一般在ng项目中很少使用DOM操作

     *：ng中完全遵循MVC思想，将html当做是展示数据的view，而需要在界面中展示的数据就是modle 

     *： 在ng中，凡是一个ng-app就是一个模块，可以理解模块是很多MVC结构的一个集合，模块中有很多的对象，最典型的就是有很多的控制器，每个控制器背后都有一个$scope作为model的载体。

    

3.框架和库

     库：是一堆按照功能分类的方法，对象数据的集合，目的就是将用户开发的代码简化方便

     框架：框架是一种结构，该结构规定了用户该如何使用，按照这个结构编写代码

     模块：一般将具有一类功能的数据，方法，对象等组合到一起，构成一个模块

     组件：模块的功能化的结果，可以独立完成一个具体逻辑的全部内容的集合

4.

   ng-app：ng从此处开始处理，这里就是view

      *：一个页面中只能出现一个ng-app，如果出现多个的话，后面的都无效。。。

      *：如果想要使用多个ng-app，需要使用angular.bootstrap方法

    
     
        
      
      {
   { inputData }}    
     
    
     
        
      
      {
   { inputData }}    
     

 

   ng-model:数据

           *:凡是需要处理的标签数据，使用ng-model可以实现数据的双向绑定

           *：双向数据绑定，就是从界面中到model的变化，但是界面中数据操作发生了变化（用户的行为），背后的model中对应的数据一并改变，从背后到界面，凡是背后的model中的数据发生了变化，那么界面中凡是使用了ng-model、ng-bind插值语法等数据的地方，值也跟着改变

           *：如果需要手动的控制数据的变化，就必须首先创建一个模块，该模块对应于界面中的ng-app

  ng-controller：该属性会提供一个具体的函数，在函数中处理数据，维护每一个具体的功能

 5.angular语法

var module= angular.module('ng-app的名字',[])   //创建一个模块  module.controller('控制器的名字',function($scope){
   //所有的操作都应该挂载到模块中      //凡是在代码中出现了ng-model以后，ng都会创建对应的数据模型      //ng会利用控制器作为分割，会给每一个控制器创建一个对象叫$scope，可以控制数据      //在使用的时候，必须使用该名字不能修改

//在控制器中所有的model数据，实际上都是$scope的属性,

$scope.inputData='angular';

})

6.小案例(数据双向绑定)

     
     
            
                  
      {
   {abc}}     
     

7.计算器小案例

        +        =    
         {
   { num1 + num2 }}

8.生成可自动排序的表格

    
     
        
              
               
               
               
      
                    
                         
                                                                                          
name
                              
age
                              
gender
                         
                    
                    
                         
                              
{
   { item.name }}
                              
{
   { item.age }}
                              
{
   { item.gender }}
                         
                    
               
    
     

9.定义与获取模块

 *：允许用户自己定义多个模块，然后将这个模块与页面中的ng-app结合

 *：angular.module这个方法还可以用来火的已经定义的模块，凡是定义的数据都会存储在angular这个对象的内部，使用该方法，可以在内部查询已经创建好的模块，如果没有找到该模块，那么报错，如果找到了该模块，则返回该模块，即可以直接用于创建控制器等其他内容。

 *：模块的获取不受到闭包的影响

10.项目构建工具

   gulp、grunt、webpack

    使用yeoman和generator-angular模板搭建ng项目：

    1>安装yo

        npm install -g yo

    2>安装模板

         npm install  -g generator-angular

    3>下载模板

11.控制器

 在传统的MVC框架中，控制器是ianxiview和model的桥梁，一般书写代码在控制器中，唉控制器中调用使用视图与数据模型，在ng中弱化了控制器的功能，在MVC思想中的两个基本问题：

   1>数据如何同步（$scope.$applay是实现数据双向绑定的原理）

   2>业务逻辑如何实现

 在ng中控制器的功能实际上表现出来的只有模块功能的管理作用

12.MVVM

  因为减少了控制器的作用，但是引入了一个新的对象，这个对象与界面中的数据一一对应，并且支持数据的双向绑定，这样的一个对象与model还是有一定的区别，这个对象成为viewmodel，基础视图的数据模型，因此就弱化了controller的概念，但是强化了viewmodel的功能，因此有人称ng是mvvm框架。

13.如何让创建控制器？

  语法:

module.controller('控制器的名字',function($scope){}) //在内部执行的时候，会将第二个参数转换成数组的形式 //在代码的运行内部利用参数可以获得函数体，将其tostring后可以获得参数列表，再将其拼接成数组

完整写法:

module.controller('控制器的名字',['$scope',function($scope){}])

14.依赖注入：

  依赖：就是在实现某些功能的时候，需要某些特定的对象

  注入：就是需要某个对象的时候作为参数传入

  依赖注入：在使用某个对象的时候，利用参数参入

  除了$scope外，还有$http、$interval、$window、$rootScope...........

  小案例：

            
     
        
      
            
       
        {
   {item.title}}
       
            
               
      
    
     

15.依赖注入的本质：

1>ng在运行的时候，给在内部创建很多对象

2>这些对象都是私有的

  

// 为什么依赖注入的时候, 需要传入是是一个字符串的名字?

// 传入的是一个名字, 那么在算法的内部

// 就会通过这个名字, 找到内部创建的对象

// 在函数调用的时候( 控制器 ), 将这个同名的 内部创建的 对象 传入函数

// 如果传入的名字, 内部没有创建, 就会检查其他模块中是否定义了

// 如果有定义, 一样拿过来用

// 如果都没有就会报一个错误

// XXXXProvider 的错误

module.controller( '名字', function ( $scope, $http ) {

});

// => 转换

module.controller( '名字', [ '$scope', '$http', function ( $scope, $http ) {

}] );

16.依赖注入的小案例：

17.在ng 中可以被注入的对象有两类，一类是provider，一类是服务

18.作用域(scope)

  每个controller上的数据都是绑定到scope上面的，不同的controller拥有不同的数据

  作用域对象：（就是$scope）

 

-> 什么时候创建 $scope

在 ng 凡是有 控制器就有 $scope 存在.

在 ng 中还有一个特点, 就是懒加载, 也就是说无论是什么对象只有在使用的时候被创建.

-> 多个 $scope 之间的 关系是什么

在 ng 中 控制器可以分配作用域, 即凡是定义一个 控制器 就会创建 一个 $scope. 如果控制器有

嵌套( 在一个 控制器里定义另一个控制器 ), 那么内控制器的 $scope 原型继承自 外控制器的 $scope

对象 a 原型继承自 对象 b, 就是说 a 可以使用 b 中的方法, a 的 __proto__ 就是 b

Object.create( b ) -> a

在 原型继承中 如果 父对象 与 子对象 同时具有同名的属性会怎样?

-> 在 原型继承中 子对象可以继承访问 父对象的所有成员

var base = { name: 'jim' };

var sub = Object.create( base );

console.log( sub.name );

-> 如果在原型继承中 修改或设置 子对象的属性, 相当于给当前对象增加了属性.

sub.age = 19;

-> 如果修改或设置 子对象中 与 父对象同名的属性, 实际上父对象不变, 而是给子对象增加了对应的属性

sub.name = 'tom';

// 除非 sub.__proto__.name = 'tom'

根据属性搜索原则, 在利用子对象访问 name 属性的时候, 只操作子对象, 与父对象无关.

需要具备一个能力, 看 html 标签 绘制 scope 关系

<body ng-app="mainApp">

<div ng-controller="ControllerA"> <!-- $scope( modelA ) -->

外: modelA: <input type="text" ng-model="modelA">

<div ng-controller="ControllerB"> <!-- $scope( modelB ) -->

内: modelB: <input type="text" ng-model="modelB"><br>

内: modelA: <input type="text" ng-model="modelA">

<button ng-click="btn()">点击访问</button>

</div>

<div ng-controller="ControllerC">

另内: <input type="text" value="{

{modelA}}">

</div>

</div>

</body>

<script src="./js/angular.js"></script>

$rootscope 

-> 为什么一开始的代码中没有写 controller 也可以双向绑定????

在 ng 程序中, 一旦使用 了 ng-app 就表明该标签与其子标签被 ng 处理

实际上在背后, 凡是有了 ng-app 的背后都会被创建一个 $rootScope 的对象

它就是所有的 $scope 的祖宗, 所有的 $scope 都是直接或间接继承与 $rootScope 的

凡是没有写 ng-controller 的 ng-model 都是 $rootScope 的属性

这个 $rootScope 是程序一开始被创建的, 因此不是使用 controller 来访问

ng 的 module 有一个方法, 叫做 run(), 表示运行, 即 ng 程序一运行的时候就会

执行该方法.

语法: 

module.run( [ '$rootscope', function ($rootscope ) { ... } ] )

        
     
        
              
      
       {
   {mainModel}}
      
    
     

19.注册小案例

    
         请输入用户名: 
    请输入密码: 
    请确认密码: 
        注册    
     
      {
   {errMsg}}
     

20.搭建本地http服务器

1> 在 node 官网下载 node 安装包

下载 .msi 格式的需要双击安装

如果下载 zip 格式的 可以配置命令行手动安装

2> 下一步下一步安装

安装完成以后, 验证是否安装成功使用

node -v

npm -v

3> 安装成功后使用 安装 hs 服务器软件

npm install -g http-server

4> 使用 shift + 右键 菜单中可以看到 在当前目录下 打开命令行

5> 键入 hs -o 或 http-server -o 可以打开服务,在 当前目录下搭建 http 服务器, 并打开页面

默认载入 index.html 文件

和 http-server 一样, 有一个 服务软件 browser-sync（浏览器同步）

21.$http基础知识（数据的展示案例）

    
     
        
      
                   
        
                         
{
   {item.name}}
                         
{
   {item.age}}
                         
{
   {item.gender}}
                    
               
      
    
     

22.数据的删除案例：

    
     
        
      
                   
        
                         
{
   {$index}}
                         
{
   {item.name}}
                         
{
   {item.age}}
                         
{
   {item.gender}}
                         
删除
                    
               
      
    
     

23.数据的增加案例

    
     
              姓名: 
      
      
        年龄: 
      
      
        性别: 
      
      
        
      添加        
      
        
              
      
        
      
                   
        
                         
{
   {$index}}
                         
{
   {item.name}}
                         
{
   {item.age}}
                         
{
   {item.gender}}
                         
删除
                    
               
      
    
     

 24.事件

- 什么是事件

一般涉及到事件的时候, 指的事件机制, 通俗的解释是 当用户执行某一个行为的时候, 浏览器会自动的调用预先注册好的函数.

与事件相关的名字有很多

1> 事件处理函数. 就是响应用户的函数.

2> 事件( 做名词讲 ). 是指事件名. 注意是不包含 on 的名字.

3> 事件的注册( 给 on... 赋值 )

... ...

了解

4> 事件监听

浏览器会判断在用户发出某个行为的时候, 是否注册了对应的事件处理函数. 如果有就会发射事件.

5> 事件发射

调用内置的事件处理函数

a 标签为例, 点击 a 标签的时候会跳转, 那么这个跳转就是默认的处理行为

在默认的事件处理函数中会调用 on... 的事件处理函数( 用户的事件处理函数 )

猜测, 默认的逻辑为

function 默认() {

if ( onclick ) {

if ( onclick() === false ) return;

}

// 默认的逻辑

// 跳转

location.href = ....

}

通俗的解释

京东在买东西, 我看上了一个产品( angular权威指南 ), 但是价格很高.

点击收藏: 提示你是否要降价提醒. 如果我选择了降价提醒.

事件机制在实际开发中有一个设计模式与之对应

1> 观察者模式

2> 代理模式

- 事件模型

如果说需要自定义事件, 那么就需要自己实现

1> 事件的注册

2> 事件的发射

3> 监听一般使用内置事件进行监听

例如页面中有一个案例 btn

那么需要提供函数

1> on 绑定事件

2> fire 发射事件

3> 监听 onclick 赋值

作业

function MyControl( dom ) {

this.dom = ...dom...;

this.events = {};

// 监听...

}

MyControl.prototype = {

on: function () {},

fire: function () {}

}

var triBtn = new MyControl( '#dv' );

triBtn.on( '...', function () ... )

- angular 中事件的使用

在 ng 中有两个非常常用的事件

1> emit 从子控制器向父控制器方向传播事件

2> broadcast 从父控制器向子控制器方向传播事件

这两个方法都是用来发射事件的, 注册使用 $on( ... )

 emit事件：

brodcast事件：

兄弟控制器间传递信息：

25.表达式

有数据与运算符连接的, 并且有值的式子就是表达式

123

n = 123

func()

- ng 中表达式

ng 中的表示式是一个类 javascript 代码片段.

它主要用在插值语法中( {

{ }} ), 或指令中( ng-click="btn()" ). 主要用于计算值

或函数调用.

- ng 表达式与 js 表达式的异同

 <div>{

{ 1234 | currency }}</div>   //将数字以货币形式展示

26.frameset(页面分栏)

27.过滤器：

- 什么是过滤器

所谓的过滤就是将一堆数据进行一个筛选, 找到你想要的数据.

在 ng 中, 所谓的过滤是指, 将一个数据( 单个数据, 或数组等 ) 用一个函数进行处理, 得到一个具体的结果.

这个过程就是过滤. 通俗说, 就是 "洗一下". 再一种解释好比 映射( map ).

- 作用

将 ng 中使用的数据, 按照一定的规则显示出来

例如:

货币: 按照格式显示货币

日期: 按照指定的格式显示日期

    
     
      {
   { now | date: 'yy年MM月dd日  hh:mm:ss' }}
     

- 语法

- 表达式

{

{ 数据 | 过滤器名: 参数 }}

所谓的过滤器名, 其实就是一个函数, 其中竖线表示的含义是 将前面的 "数据" 作为参数传入到 过滤器这个函数中.

那么函数的 第一个参数就是 前面的数据. 但是为了可以控制函数的具体实现, 函数还可以带有其他参数. 在 过滤器名

后面用 冒号 连接的 内容就是参数, 如果有多个参数, 例如两个参数的时候, 使用语法

{

{ 数据 | 过滤器 : 参数1 : 参数2 }}

- 自定义过滤器

使用语法

module.filter( '过滤器的名字', [ function () {

return function ( input ) { // 这个被 return 的函数就是过滤器函数

}

}] );

    
     
      {
   { 'ng-app' }}
     
    
     
      {
   { 'ng-app' | tocamel }}
     

- 注入

### 内置常用过滤器

filter 过滤, 该过滤器使用在数组数据的后面, 用于过滤出子数组

filter 带有三种参数形式

1> 单个数据, 凡是在数组中数据与之一样的就被留下来

2> 对象, 用来过滤 对象数组

3> 带有一个函数, 用来对当前元素进行判断, 类似于 jquery 的 map 函数.

该函数就是在判断当前元素是否需要被过滤出来

currency 表示货币, 意味着使用金钱的方式来现实. 没有参数.

number 表示已小数点后 多少位 来现实数据. 使用的时候使用语法

{

{ num | number: 3 }} // 保留小数点后 3 位

date 采用时间格式来现实

yyyy 年份, yy 没有世纪时间的年份

MM 月

dd 日

hh 小时, HH 表示 24 小时制

mm 分钟

ss 秒

.sss 毫秒

json 以 json 的格式显示数据

lowercase 转小写

uppercase 转大写

limitTo 表示从数组的哪一个位置开始, 到哪一个位置截取

limitTo: 3 从 左开始, 截取 前 3 个数据

limitTo: -4 从 右开始, 截取 后 4 个数据

orderBy 排序

带有三个参数

1> 表示按照什么属性排序, 带有负号的时候降序, 默认试试升序.

2> 一个 boolean 值, 表示是否逆序

3> 一个函数, 表示比较规则. 使用比较规则排序

### 过滤器组合使用

数据 | 过滤器1 | 过滤器2 | 过滤器3

### 自定义过滤器

28.指令 directive

- 什么是指令

指令 就是 命令的意思. 简单的描述就是给一个指令( 命令 )给你, 那么你就要做很多的事情.

在 ng 中, 指令是写在一个标签中的一个特殊的属性, 例如 ng-XXX. 在 ng 中凡是写了指令

的地方, 其实背后会有一连串的代码被执行.

例如:

ng-controller, 背后会 创建 $scope 等数据

ng-app, 背后会创建 模块, $rootScope 等数据

ng-repeat, 直接根据 数据 创建 html 标签

ng-model, 背后就将数据加到 最近的 一个 $scope 中

ng-click, 背后就创建一个监听 点击的事件

... ...

### 内置指令

// 这里的指令都是延迟, 或 需要 ng 执行得到结果的指令

ng-href

ng-src

ng-class 用于设置 类样式的属性

传统的语法是使用 class="..."

需要时常更改 class 中含有的 类样式

正常情况可能是 class="navigator hide", 菜单被展开以后, 可以变成 class="navigator"

ng-class 的语法是 需要一个对象

例如: ng-class="{ 键: 值, 键: 值, 键: 值 }"

此时 键名 就是 类样式的名字

值是一个 boolean 值, 表示是否含有该类样式

例如, 要实现

class="navigator hide"

可以写成

ng-class="{ navigator: true, hide: true }"

如果要写成

class="navigator"

可以是

ng-class="{ navigator: true, hide: false }"

ng-style 该属性用于设置样式, 其样式的值按照 分号分割 罗列在 该属性中

例如:

style="width: 200px; height: 100px; border: 1px solid red;"

ng-style 可以跟一个对象, 其对象的键值对 就表示 样式的名字与值

ng-cloak 给所有的 使用了 ng 指令 的 html 标签加上一个 hide 类样式, 就是设置其 display: none

ng-bind 就是插值语法的指令形式

<div>{

{ num }}</div>

等价于

<div ng-bind="num"></div>

ng-app

ng-controller

ng-model

 

//boolean类型的指令

ng-selected

ng-readonly

ng-disabled

//具有流程控制的指令

ng-if  //元素是否存在   ng-hide和ng-show有类似的功能

ng-switch //类似于switch-case语句

     
    
      
      
       
        222
       
      
       
        333
       
      
       
        default
       
   
      
 
     

ng-view//就是一个容器，用于路由操作

ng-repeat// 注意： $index、 $even、$odd、 $first、 $last 

ng-init

//事件指令（添加到scope上）

ng-click

ng-dbclick

ng-change

ng-select

ng-submit

ng 1.5.8 中有 64 个指令

 

 自定义指令:

定义的语法：

//定义的语法：     angular.module('mainApp',[])     .directive('itLogin',[function(){//要用驼峰命名法              return{
   //指令的配置                  template:'
     
      '+                  '请输入用户名：
      
      
'+                  '请输入密码：
      
      
'+                  '
      '+                  '
     
'              };          }]) //自定义指令的使用：

<div it-login>

</div> 

自定义指令的属性：

restrict：string   //设置指令的使用形式(EACM),可以允许我的指令以标签、属性、class、注释的形式给出

            E：element

            A:attribute

            C：class

            M：common

            eg：<it-login></it-login>          

priority:number  //设置指令的优先级

triminal:boolean      //停止优先级低于该指令级别的指令

template: string | function

templateUrl:'tmp.html'   //设置模板的路径

replace：boolean     //设置将指令标签替换成模板内容

scope：boolean  |   object   //用于设置独立的作用域

        取值为true表示继承作用域

        直接赋值一个对象，这个就是独立的作用域（不参与集成的特例）

controller： string | ['$scope', function($scope){}]   //设置事件的处理函数

require:string

link :function

compile:function

transclude: true     （嵌入，转换包含，转置  ）    //将使用指令时传入标签内数据站换到模板中         

    
     
      哈哈哈哈
     

29.路由

操作步骤：

1>下载angular.js和angular-route.js

2>在页面中放置一个容器

<ng-view></ng-view>

3>在创建模块的时候引入'ngRoute'

angular.module('mainApp',['ngRoute'])

4>在模块中有一个方法config是在程序运行之前被执行的，该方法中可以完成程序的预设值

在ng中config方法和run方法构成了程序运行红的预备和运行的行为

在config中配置路由信息，使用语法：

.config(['$routeProvider',function(){

$routeProvider

.when('/',{

template:''

})

.when('/',{

template:''

})

.otherwise({redirectTo:'/'})

}])

在路由中的参数，就是url中的#后面的内容(hash）

       <a href="#/">首页</a>

       <a href="#/a">a页</a>#/

       <a href="#/b">b页</a>

       <a href="#/c">c页</a>

       <ng-view></ng-view>

路由中的属性：

1>templateUrl

2>template

3>controller:函数 | 字符串

30.

移除路由的url中的#

1>在config方法中，配置$locationProvider,启用html5模式

(function(){        angular.module('mainApp')          .config(['$locationProvider',function($locationProvider){              $locationProvider.html5Mode(true);          }])    })()

2>修改根路径为当前页面的路径

//设置根路径

3>修改所有的a标签的href属性

       首页 //    /是根目录，需要去掉       a页#/        b页       c页       
     

31.服务：提供一些特定功能的对象（在ng中，服务就是被注入的对象）

     在ng中被定义用来使用的数据、对象、函数   就是服务

factory

  语法：

  module.factory('服务名',[function(){

     return 服务的本体

  }])

service

 语法：

   module.service('服务名',构造函数)

  与

module.factory('服务名',function(){

     return new 构造函数名()

  })等价

constant：定义常量变量（不可变）//可以定义在config之前

 语法：

 module.constant('服务名',值)

value：定义变量（可变的）

语法：

 module.value('服务名',值)

provider

 语法：

 module.provider('服务名',{

   $get:function(){//必须提供$get方法

   return  服务本体

  }

 })

 32.项目结构

yeoman工具

1>安装yo工具

    npm install -g -o

2>安装angular 模板(gulp版本)

  npm install  -g  generator-gulp-angualr

3>运行yo下载模板依赖

   很据需求下载数据即可

   npm install  & bower install

 简单命令：

  mkdir myapp  //创建文件夹

33.angular内部算法原理

双向数据绑定  $scope.applay()

 

 脏值检测