AngularJS从入门到实施(一)

 

  前  言

 前端 

   
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

 

代码如下:

 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>

 

 

 

学学时候的笔记,可能会有局地荒唐的地点,欢迎各位的批评率领。

反躬自省,复盘,天天得到一点———————期待更好的和睦

 

相关文章