AngularJSAngularJS从入门到实践(一)

 

  前  言

 前端 

   
AngularJS是为了克服HTML在构建以达到的不足使规划之。(引用百度百科)

  AngularJS使用了不同的计,它尝试去补足HTML本身在构建利用方面的通病。AngularJS通过使用我们誉为指令(directives)的组织,让浏览器会辨识新的语法。 style=”font-size: 14px; font-family: ‘Microsoft YaHei’;”>(引用百度百科)

   

   例如:

 

        使用对大括号{{}}语法进行数据绑定;

 

        使用DOM控制结构来实现迭代或者隐藏DOM片段;

 

        支持表单和表单的证实;

 

        能将逻辑代码关联到有关的DOM元素上;

 

        能将HTML分做可选用的机件。

 

style=”font-size: 14px; font-family: ‘Microsoft YaHei’;”>本篇学习要有个别单部分:

  ①【AngularJS 常用命令】
  ②【AngularJS  的  mvc 】
 

          

 

1、AngularJS 常用指令

【常用命令】
  1.na-app:声明angularjs所管辖的区域,一般写于body或者HTML上规范一个单向只写一个
        
        <body ng-app=””> </body>
        2.ng-model 限令把元素值(比如输入域的价值)绑定到应用程序。
            
        <input type=”text”  id=”input” ng-model=”name”/>
        3.ng-bind 指令把应用程序数据绑定到 HTML 视图。
        
            ①<div id=”div” ng-bind=”name”></div>
            ②<div>{{name}}</div>
        4.ng-init 发令初始化 AngularJS 应用程序变量。
            <body ng-app=”” ng-init=”name=123″></body>
            
      
 5.表达式:{{}}绑定表达式,可以蕴涵数字、运算符和变量。但表达式在网页加载瞬间会晤见到{{}},所以可以就此ng-bind=”代替
        {{5+””+5+’,Angular’}}

【基本感念】
令:AngularJS中,通过扩展HTML的性提供功能 
↓↓↓↓(菜鸟教程被的原话)
            AngularJS 指令是扩张的 HTML 属性,带有前缀 ng-。

            ng-app 指令初始化一个 AngularJS 应用程序。
            
            ng-init 指令初始化应用程序数据。
            
            ng-model
指令把长素值(比如输入域的值)绑定到应用程序。     
       

 

2、AngularJS  的  mvc

   
【mvc三交汇框架】

            1、
Model(模型):应用程序中居于处理属性局的局部。(保存还是涂改数据及数据库、变量等)。AugularJS中之Model特征的是:数据
              view(视图):用户观看底假设用于展示数据的页面
          
   controller(控制器):应用程序中处理用户交互的片。负责从视图读取数据,控制用户输入,并项目性发送数据。

          
 2、工作原理:用户从视图层发送请求,controller接收到请求后转向让相应的model处理,medle处理完了后赶回结果为controller,并于view成反馈给用户。
       

  创建一个angular模块,即ng-app所绑定的一些,需要传递两独参数:
            ① 模块名称,即ng-app所待绑定的名号。ng-app=”myApp”;
            ② 数组:需要注入的模块名称,不待而为空。
       
        var app = angular.module(“myApp”,[]);
       
         在Angular模块上,创建一个控制器Controller,需要传递两只参数称。
 
         ① ng-controller=”myCtrl”
         ②
controller的构造函数:构造函数可以流传多单参数,包括$scope/$roatScope以及各种系统放对象
        
        【angularJS中的作用域】
      
 ①$scope:局部作用域,声明在$scope上之性能和艺术,只能于当下Controller中采用;
      
 ②$rootScope:根作用域,声明在$rootscope上之熟悉感和法好当ng-app所蕴藏的任何区域使用(无论是否同意controller,或是否以controller包含范围中)。
        >>> 若没有以$scope
声明变量,而直接当html中以ng-model绑定的变量作用域为:
      
 1.如果ng-model在有ng-controller中,则是变量会默认绑定到目前Controller的$scope上
      
 2.万一ng-model没有以其他一个ng-controller中,则是变量将绑定以$rootScope上。

功用图如下:

 

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .div1{
 8                 width: 300px;
 9                 height: 100px;
10                 background-color: #00BFFF;
11             }
12         </style>
13     </head>
14     <body ng-app="myApp">
15         <div ng-controller="myCtrl">
16             <input type="text" ng-model="name"/>
17             <div ng-bind="name" class="div1"></div>
18             <div ng-bind="age" class="div1"></div>
19             <div ng-bind="classes" class="div1"></div>
20             <div ng-bind="classes.name" class="div1"></div>
21             <div ng-bind="classes.age" class="div1"></div>
22             <div ng-bind="classes.sex" class="div1"></div>
23             
24         </div>
25         <div ng-controller="myCtrl1">
26             <input type="text" ng-model="name"/>
27             <div ng-bind="name" class="div1"></div>
28             <div ng-bind="age" class="div1"></div>
29         
30         </div>
31             
32     </body>
33     <script language="JavaScript" src="angular-1.5.6/angular.js"></script>
34     <script type="text/javascript">
35         var app = angular.module("myApp",[]);    
36         app.controller("myCtrl",function($scope){
37             $scope.name = "帅哥" ;
38             $scope.age = "18岁";
39             $scope.classes = {
40                     name:"张三",
41                     age:"16岁",
42                     sex:"男"
43                 
44             };
45             
46         });
47         
48         app.controller("myCtrl1",function($rootScope){
49             $rootScope.name = "hahaha" ;
50                     });
51         
52     </script>
53 </html>

 

 

 

读时的记,可能会见生一些误的地方,欢迎各位的批评指点。

自省,复盘,每天得到一点———————期待再次好的自己

 

相关文章