zoukankan      html  css  js  c++  java

  • 深究angularJS系列

    AngularJS是什么？概念？特征？优点？缺点？那都不是事，话不多说，直接搞起O(∩_∩)O~~

    深究angularJS系列 - 第三弹

    深究angularJS系列 - 第二弹

    安装

    1.官网http://angularjs.org/下载安装

    2.开源库http://www.bootcdn.cn/下载安装

    3.bower（一种包管理器）下载安装

    bower install angular

    MVC

    MVC即“模型 - 视图 - 控制器”的简称，一种设计模式，MVC的从逻辑上将代码清晰地分割为三层，这样可以对每个部分进行独立开发、测试和维护。

    • 模型/Model - 服务层（service）负责维护数据

    • 视图/View - 展示层（diretive）负责将数据展现给用户

    • 控制器/Controller - 控制层（control）负责控制Model和View之间的交互

    AngularJS启动分析

    案例1

     1 <!DOCTYPE html>
 2 <html lang="en" ng-app="demo">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>demo</title>
 6         <script src="angular.js"></script>
 7     </head>
 8     <body>
 9         {{1+1}}
10         <script>
11             (function(){   //匿名自执行函数，保证angular.js加载完后，立即执行其中的代码
12                 angular.module("demo",[])
13             })()
14         </script>
15     </body>
16 </html>

    结果如下：

    angualr应用创建基本步骤

    1.引入angularJS

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

    2.标记ng-app

    说明：ng-app是程序起动指令,用来标记 angularJS的管理边界,标记在html元素上面,则表示所有html内部的元素都在angularjs的管理范围

    三种用法：

    ng-app

    1 <html lang="en" ng-app>

    ng-app=""

    1 <html lang="en" ng-app="">

    ng-app=“根模块名”

    1 <html lang="en" ng-app="demo">

    3.创建项目的根的模块

    1 angular.module("demo",[]);

    4.angular进入自动启动

    angualr应用创建完成

    注：{{angular特有表达式}}

    案例2

     1 <!DOCTYPE html>
 2 <html lang="en" ng-app="demo">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6     <link rel="stylesheet" href="bootstrap.css">
 7     <script src="angular.js"></script>
 8 </head>
 9 <body>
10     {{1+1}} {{msg}}
11     <div id="box" ng-controller="oneCtrl">
12         {{1+1}} {{msg}}
13     </div>
14     <script>
15         (function(){
16             angular.module("demo",[])
17             　　　.controller("oneCtrl",function($scope){
18                  　　　　$scope.msg = "hello angular!"
19             　　　})
20         })()
21     </script>
22 </body>
23 </html>

    结果如下：

    问题：

    1.为什么第二个表达式{{msg}}，输出结果是hello angular！？

    答：下方的代码注册一个名为oneCtrl的控制器功能，控制器函数注册在Angular中，可以通过angular.module(...).controller(...) 的函数来调用。

    1 angular.module("demo",[])
2 　　 .controller("oneCtrl",function($scope){
3         　$scope.msg = "hello angular!"
4  　　})

    2.为什么第一个表达式{{msg}}，没有通过angular.module(...).controller(...)的函数来调用?

    答：angularJS具有严格边界管理范围，第一个表达式{{msg}}，不在oneCtrl的控制器的管理范围

    案例3

     1 <!DOCTYPE html>
 2 <html lang="en" ng-app> //没有写成ng-app="demo"
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6     <link rel="stylesheet" href="bootstrap.css">
 7     <script src="angular.js"></script>
 8 </head>
 9 <body>
10     {{1+1}} {{msg}}
11     <div id="box" ng-controller="oneCtrl">
12         {{1+1}} {{msg}}
13     </div>
14     <script>
15         (function(){
16             angular.module("demo",[])
17                 .controller("oneCtrl",function($scope){
18                      $scope.msg = "hello angular!"
19                 })
20         })()
21     </script>
22 </body>
23 </html>

    结果如下：

    问题:

    1.ng-app,ng-app="",ng-app="demo"三者的区别

    答：ng-app有一个默认的模块。如果有多个ng-app，默认是加载第一个，而且只加载第一个。ng-app=“自定义的模块” 是一个使用了自定义的模块，该自定义的模块继承了那个初始的默认的模块，可以调用初始的默认的模块的方法第二者是第三者的特例。

    2.为什么第二个{{1+1}} {{msg}}没有加载出来

    答：看代码，要加载，只能是angular.module(...).controller(...)的函数来调用，而调用时首先就是找angular.module("demo",[])的根目录“demo”

    然而源码中并没有标记“demo”根目录

    案例4

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6     <link rel="stylesheet" href="bootstrap.css">
 7     <script src="angular.js"></script>
 8 </head>
 9 <body>
10     {{1+1}} {{msg}}
11     <div id="box" ng-controller="oneCtrl">
12         {{1+1}} {{msg}}
13     </div>
14     <script>
15         (function(){
16             angular.module("demo",[])
17                 .controller("oneCtrl",function($scope){
18                     $scope.msg = "hello angular!"
19                 })
20             angular.bootstrap(document,["demo"]);        
21             angular.bootstrap(document.getElementById("box"),["demo"]); 
22         })()
23     </script>
24 </body>
25 </html>

     结果如下：

    问题：

    1.为什么没有ng-app,也可以启动angular?

     答：如果在当前的页面中包含有ng-app这个指令，angular会自动启动，如果不想在当前的页面中显示标识ng-app,我们可以代码的方式手动启动，即通过angular.bootstrap(document,["demo"])手动启动，等价于ng-app="demo";

     2.angular.bootstrap(document.getElementById("box"),["demo"])的作用？

    答：angular.bootstrap(启动位置,数组)，启动位置：表示管理范围，数组：表示把数组中的当成启动模块

     案例5

     1 <!DOCTYPE html>
 2 <html lang="en" ng-app="demo">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>控制器之间的继承</title>
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 7     <link rel="stylesheet" href="../bootstrap.css">
 8 </head>
 9 <body>
10 <div class="well" ng-controller="oneCtrl">
11     {{msg}}
12     <div  class="well" ng-controller="twoCtrl">
13         {{msg}}
14         <div class="well"  ng-controller="threeCtrl">
15             {{msg}}
16         </div>
17     </div>
18 </div>
19 <script src="../angular.js"></script>
20 <script>
21     (function(){
22         angular.module("demo",[])
23             .controller("oneCtrl",function($scope){
24                 $scope.msg = "helle one!"
25             })
26             .controller("twoCtrl",function($scope){
27 //              $scope.msg = "helle two!"
28             })
29             .controller("threeCtrl",function($scope){
30 //              $scope.msg = "helle three!"
31             })
32 
33     })()
34 </script>
35 </body>
36 </html>

    结果如下：

    问题：

    1.为何twoCtrl、threeCtrl控制器也输出hell oone！？

    答：当我们的html元素出现嵌套关系的时候，内层继承外层的变量，造成值的重写问题


    敬请留言指正补充交流！！

    （初识 - 完~~）
  • 相关阅读:
    XML学习教程
    JSON 的含义？
    局域网共享问题全方位解决
    VMware虚拟化培训手册
    信息化建设中的IT规划精要
    洛谷1265 公路修建
    洛谷1144 最短路计数
    NOI题库05 派
    NOI题库7624 山区建小学（162:Post Office / IOI2000 POST OFFICE [input] ）
    vijosP1014 旅行商简化版
  • 原文地址：https://www.cnblogs.com/xiuhongbin/p/angular.html
Copyright © 2011-2022 走看看