前  言

 前端 

　   AngularJS是为了克服HTML在构建应用上的不足而设计的。（引用百度百科）

　　AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。（引用百度百科）
　　　
　　　例如：
　　　　　　　　使用双大括号{{}}语法进行数据绑定；
　　　　　　　　使用DOM控制结构来实现迭代或者隐藏DOM片段；
　　　　　　　　支持表单和表单的验证；
　　　　　　　　能将逻辑代码关联到相关的DOM元素上；
　　　　　　　　能将HTML分组成可重用的组件。

本篇学习主要有两个部分：

①【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上。

效果图如下：

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .div1{

                 width: 300px;

                 height: 100px;

                 background-color: #00BFFF;

             }

         </style>

     </head>

     <body ng-app="myApp">

         <div ng-controller="myCtrl">

             <input type="text" ng-model="name"/>

             <div ng-bind="name" class="div1"></div>

             <div ng-bind="age" class="div1"></div>

             <div ng-bind="classes" class="div1"></div>

             <div ng-bind="classes.name" class="div1"></div>

             <div ng-bind="classes.age" class="div1"></div>

             <div ng-bind="classes.sex" class="div1"></div>

         </div>

         <div ng-controller="myCtrl1">

             <input type="text" ng-model="name"/>

             <div ng-bind="name" class="div1"></div>

             <div ng-bind="age" class="div1"></div>

         </div>

     </body>

     <script language="JavaScript" src="angular-1.5.6/angular.js"></script>

     <script type="text/javascript">

         var app = angular.module("myApp",[]);

         app.controller("myCtrl",function($scope){

             $scope.name = "帅哥" ;

             $scope.age = "18岁";

             $scope.classes = {

                     name:"张三",

                     age:"16岁",

                     sex:"男"

             };

         });

         app.controller("myCtrl1",function($rootScope){

             $rootScope.name = "hahaha" ;

                     });

     </script>

 </html>

学习时候的笔记，可能会有一些错误的地方，欢迎各位的批评指点。

反思，复盘，每天收获一点---------------------期待更好的自己

AugularJS从入门到实践（一）的更多相关文章

  1. AugularJS从入门到实践（二）

      前  言  前端    AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) 本篇学习主要有两个部分: ①[AngularJS 过滤器]   ②[AngularJS  ...

  2. AugularJS从入门到实践（三）

      前  言  前端    AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...

  3. 《Github入门与实践》读书笔记 蟲咋先生的追求之旅（上）

    <Github入门与实践>作者: [日] 大塚弘记 译者:支鹏浩/刘斌   简介 本书从Git的基本知识和操作方法入手,详细介绍了GitHub的各种功能,GitHub与其他工具或服务的协作 ...

  4. Python编程从入门到实践笔记——异常和存储数据

    Python编程从入门到实践笔记——异常和存储数据 #coding=gbk #Python编程从入门到实践笔记——异常和存储数据 #10.3异常 #Python使用被称为异常的特殊对象来管理程序执行期 ...

  5. Python编程从入门到实践笔记——文件

    Python编程从入门到实践笔记——文件 #coding=gbk #Python编程从入门到实践笔记——文件 #10.1从文件中读取数据 #1.读取整个文件 file_name = 'pi_digit ...

  6. Python编程从入门到实践笔记——类

    Python编程从入门到实践笔记——类 #coding=gbk #Python编程从入门到实践笔记——类 #9.1创建和使用类 #1.创建Dog类 class Dog():#类名首字母大写 " ...

  7. Python编程从入门到实践笔记——函数

    Python编程从入门到实践笔记——函数 #coding=gbk #Python编程从入门到实践笔记——函数 #8.1定义函数 def 函数名(形参): # [缩进]注释+函数体 #1.向函数传递信息 ...

  8. Python编程从入门到实践笔记——用户输入和while循环

    Python编程从入门到实践笔记——用户输入和while循环 #coding=utf-8 #函数input()让程序暂停运行,等待用户输入一些文本.得到用户的输入以后将其存储在一个变量中,方便后续使用 ...

  9. Python编程从入门到实践笔记——字典

    Python编程从入门到实践笔记——字典 #coding=utf-8 #字典--放在{}中的键值对:跟json很像 #键和值之间用:分隔:键值对之间用,分隔 alien_0 = {'color':'g ...

随机推荐

  1. C# set get 函数 属性访问器

    属性访问器  拿东西就是Get,放东西就是Setprivate string namepublic String Name{set{name = value;}get{return name;}}ge ...

  2. set集合（一）

    set 叫做集合  作用:  去重(去除重复) 举例-- >>> name_list = ['alben','nichole','lucy','andy','tom','alben' ...

  3. Jenkins修改管理员密码

    前言:Jenkins修改管理员密码,我看了网上所有的教程,竟然全都是拿着一串已经加密好的111111的密文去替代config.xml文件里面的密码,然后大家的密码都是111111!我觉得这种做法实在太 ...

  4. 一、Openstack_Ocata环境部署准备

    OpenStack Ocata环境搭建准备 1.workstation下配置3个虚拟交换机 点击编辑-->虚拟网络编辑器 名称 IP地址 作用 VMnet1 10.1.1.0 Openstack ...

  5. [HDU1004] Let the balloon rise - 让气球升起来

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  6. uibutton颜色设置

     UIColor *color = [UIColor colorWithRed:100 / 255.0 green:20 / 255.0 blue:50 / 255.0 alpha:1.0]; 

  7. win7热点设置

    1.设置热点名称与密码 netsh wlan set hostednetwork mode=allow ssid=costa key=11112222pause 2.开启 netsh wlan sta ...

  8. 可视化之Earth NullSchool

    上两篇我们分别介绍了<Berkeley Earth>和<AQICN>两个网站,今天来看一下Earth NullSchool. 这个网站的特色是风向图,之前有一篇可视化之风向图, ...

  9. linux iptables规则介绍

    今天又学习了一下iptables,做一点总结来方便以后查阅. Netfilter(网络过滤器)是Linux操作系统核心层内部的一个数据包处理模块,主要负责数据包的拦截和转发,而iptables是Net ...

  10. POJ 1845-Sumdiv 题解（数论，约数和公式，逆元，高中数学）

    题目描述 给定A,B,求A^B的所有因数的和,再MOD 9901 输入 一行两个整数 A 和 B. 输出 一行,一个整数 样例输入 2 3 样例输出 15 提示 对于100%的数据满足:0 <= ...