现在的前端项目中基本上都会用到angularjs框架，之前并不了解这个框架，也是因为最近接手的项目，所以打算好好的学习下它。之前都是搞pc端，现在接手的是移动端的项目，移动端UI框架用的是ionic＋vordova，没有用bootstrap，主要做的是ios+安卓的app界面，ionic这个框架也不太了解，也需要花时间好好熟悉下。angularjs学习小白一枚，欢迎大神指正。

 AngularJs是什么？

简单来说，即javascript的一个框架，通过script标签添加到网页中。即我们使用angularjs时，需要引入下面的代码。

 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

通常建议把脚本放在<body>元素的底部，作用是：提高网页加载速度。因为html加载不受制于脚本加载。

 AngularJs的作用？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

像现在移动端基本上使用单页面的比较，就是利用angular的路由转换进行的。像我们现在这个项目也是使用的单页面。即在主页面里面，即跳转的页面都在主页面里面进行。截图如下：

  AngularJs表达式 

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

    AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

<!doctype html>

<!-- 标记angularjs处理整个html页并引导应用 -->

<html ng-app>

     <head>

         <meta charset="utf-8">

         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

     </head>

     <body>

        <p>name:{{"ting"+"feng"}}</p>

        <p>number:{{5+5}}</p>

        <div ng-init="person={name:'tingfeng',age:'13'}">

           <p>name:{{person.name}}&nbsp;age:{{person.age}}</p>

        </div>

    </body>

</html>

   AngularJs在html中的应用

主要通过ng-directive扩展html，angularjs指令是以ng作为前缀的html属性，包含有四大特性：mvc，模块化，指令系统（directive），databinding

ng-init:该指令初始化angularjs应用程序变量。比如下面的列子：

<!doctype html>

<!-- 标记angularjs处理整个html页并引导应用 -->

<html ng-app>

     <head>

         <meta charset="utf-8">

         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

     </head>

     <body>

        <div ng-init="name='tingfeng'">

             <p>name is:<span ng-bind="name"></span></p>

        </div>

     </body>

</html>

ng-app:该指令表示定义一个angularjs应用程序。通常放在html后面，也可以在局部使用ng-app指令，比如<div ng-app>则angularjs脚本仅在该div中运行,即表明从此处开始，所有内容均为angularjs进行管理。

ng-model:该指令是指把元素值（比如输入框的值）绑定到应用程序中。

ng-bind：该指令是把应用程序数据绑定到html视图中。使用相应的指令，即可利用angularjs操作html页面。具体怎么使用，我们来看看代码。

此时利用ng-model绑定到setname模型变量上，当在输入框中输入值时，相应的setname也会变化。可自行贴码测试。

关于$scope解释

$scope是什么？有什么作用？如何使用它？

简单来说，$scope是一个pojo（plain old javascript object）,类似于一个对象，有属性和方法，$scope提供了$watch()和$apply()工具方法。angularjs的mvc全部借助于$scope进行的。

特性：1.是表达式的执行环境（或者作用域）

2.$scope是一个树型结构，与dom标签平行，其上含有一个$rootscope处于最顶层。

3.$scope会继承父$rootscope的属性和方法。

4.$scope可以传播事件，类似于dom，可以向上传播也可以向下。

5.$scope不仅是mvc的基础，也是后面实现双向绑定的基础。

 AngularJs的组成部分

模板：即编写的html和css的文件，展现应用的视图。angularjs可以在html中构建自己的html标记！
 控制器:与ajax不同，不需要另外编写侦听器或dom控制器，因为它已经内置到angularjs中。 好处：便于编写，测试，维护和理解。
        
 模型数据：模型是从angularjs做用域对象的属性引申的。模型的数据可能是js对象，数组或基本类型，但都属于angularjs作用域对象。

如何理解angularjs中的作用域？

即一个作用域可以视作模板，模型和控制器协同工作的粘接器，angularjs使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但他们两者确实时同步的！任何对于模型的更改都会即时反映到视图上，任何视图的更改都会被立刻体现在模型中。

视图：在angularjs中，一个视图是模型通过html模板渲染之后的映射。即不论模型什么时候发生变化，angularjs会实时更新结合点，随之更新视图。

还是贴码来看，更加直观！

<!doctype html>

<html ng-app="HelloAngular">

     <head>

         <meta charset="utf-8">

         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

         <script>

            //模块化

           var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular

           myModule.controller("helloAngular", ['$scope',

            function HelloAngular($scope) {

                $scope.value = {

                    name: 'jiangting'

                };

            }

        ]);

       </script>

     </head>

     <body>

     <!-- mvc看angular-->

        <div ng-controller="helloAngular">  －－控制器为helloAngular

             <p>{{value.name}},hello!</p>

        </div>

        <!-- angular 模块化 -->  

     </body>

</html>

我们来看看controller的应用，即控制器，即控制器通过操作数据，将其进行绑定，展现在html页面上。

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

  ng-app指令定义了应用, ng-controller 定义了控制器。我们用上面的列子来看：

AngularJS模块定义应用：

 var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular

angularjs控制器控制应用：

 myModule.controller("helloAngular", ['$scope',

            function HelloAngular($scope) {

                $scope.value = {

                    name: 'jiangting'

                };

            }

        ]);

了解前端mvc

关于controller特性：

1.不要试图去复用controller，一个控制器一般只负责一个小块视图
      2.不要直接在controller中操作dom，这不是其职责
      3.不要在controller里面做数据过滤的操作,ng有$filter服务
      4.不要在controller里面做数据格式化，ng有很好用的表单控件
      5.controller是不会互相调用，控制器之间的交互会通过事件进行，通过$scope进行调用。

下面看下如何自定义指令系统，代码如下：

<!doctype html>

<html ng-app>

     <head>

         <meta charset="utf-8">

         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

         <script>

            //指令系统

        var myModule = angular.module("MyModule", []);

            myModule.directive("hello", function() {

            return {

                restrict: 'E',

                template: '<div>Hi everyone!</div>', --这里我们插入一段html标签

                replace: true

            }

        });

       </script>

     </head>

     <body>

        <hello></hello>

     </body>

</html>

directive中，后面返回有三个参数，其中template中指所插入的html标签。现在我门自己来写一段html代码，看看如何将其变为angularjs的写法。

原静态html代码如下：

 <ul>

          <li>

             <span>new1</span>

             <p>just a test page1</p>

          </li>

          <li>

             <span>new2</span>

             <p>just a test page2</p>

          </li>

 </ul>

将其改版为angularjs的写法如下：

<!doctype html>

<html ng-app>

     <head>

         <meta charset="utf-8">

         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

         <script>

         //$scope为控制器的作用域，

         //angularjs作用域：可以视作模板，当应用启动之后，会有一个根作用域被创建出来，而控制器的作用域是根作用域的一个典型后继。

            function  newsCtrl($scope){

                 $scope.news=[

                    {"content":"new1",

                     "introduce":"just a test page1"},

                    {"content":"new2",

                     "introduce":"just a test page2"}

                 ];

                 $scope.phones={

                    length:"4"

                    // 单个的属性不能加分号，多个属性用逗号分隔

                 };

            }

        </script>

     </head>

     <body ng-controller="newsCtrl">

      <ul>

          <li ng-repeat="new in news">

              {{new.content}}

              <p>{{new.introduce}}</p>

          </li>

      </ul>

     </body>

</html>

这里说下ng-repeat指令，即相当于angularjs迭代器，当使用ng-repeat执行命令时，从数组中获取数据。

 作者：向婷风

 出处：http://www.cnblogs.com/jtjds/p/5688214.html 

 如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意 

转载文章之后必须在 文章页面明显位置给出作者和原文连接否则保留追究法律责任的权利。

 

AngularJs学习总结－了解基本特性（－）的更多相关文章

  1. AngularJs学习笔记2——四大特性之MVC

    angularJs的四大特性 ①.采用MVC的设计模式 ②.双向数据绑定 ③.依赖注入 ④.模块化设计 现在细说一下MVC的设计模式: MVC: Model(模型)--项目中的数据 View(视图)- ...

  2. AngularJs学习笔记7——四大特性之模块化设计

    模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module(' ...

  3. AngularJs学习笔记6——四大特性之依赖注入

    压缩工具:YUI-compressor 为了优化网页功能,对一些脚本文件进行压缩,比如:删除所有的注释和空格等,简化形参.但是AngularJs模块中可以声明多种组件,如控制器.指令.过滤器.服务等. ...

  4. AngularJs学习笔记4——四大特性之双向数据绑定

    双向数据绑定 方向1:模型数据(model)绑定到视图(view) 实现方法:①.{{model变量名}}  ②.常用指令(ng-repeat) 方向2:将视图(view)中用户输入的数据绑定到模型数 ...

  5. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  6. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  7. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  8. 我的AngularJS学习轨迹

    开始接触Anguljar可能是在2013年初,那个时候的版本1.0.*,那个时候国内主要的中文资料AngularJS学习笔记:http://zouyesheng.com/angular.html,an ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

随机推荐

  1. visual studio 查找/替换对话框

    工具--选项--环境--查找和替换 如下设置: 则会在查找.替换到最后时会弹出提示,比如“查找到达了搜索的起点”,如下图: 原文:http://keleyi.com/a/bjac/27iswh0p.h ...

  2. vue单页面程序

    gitHub地址:https://github.com/lily1010/vue_singlePage 举个栗子: <!DOCTYPE html> <html> <hea ...

  3. CRM 2013 中业务流程的

    在CRM 2013 中有一个新功能就业务流程,它可以引导用户在既定好的业务规则下操作表单,实现业务之前的衔接.并且让衔接可以视化,能清楚定位到当前的流程在那个节点.我们在配置视图的时候可以将流程阶段放 ...

  4. SharePoint 解决打开浏览器自动登录

    SharePoint使用Windows身份验证,默认会弹出Windows验证登录框,如下图所示: 1.对于已经加域的客户端 IE安全设置,将站点加信任站点,然后修改信任站点安全设置, 滚动条拉到最后, ...

  5. 单独编译Android系统模块并替换进系统

    例如,我修改了frameworks\base\policy\src\com\android\internal\policy\impl\PhoneWindowManager.java文件,进入frame ...

  6. C语言笔记

    .c是C语言源文件,在编写代码的时候创建 .o是目标文件,在编译成功的时候产生  .obj .out是可执行文件,在链接成功的时候产生 工具:clang编译器(Xcode3 gcc Xcode4 LL ...

  7. iOS 简单动画 block动画

    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ UIView * view = [ ...

  8. TFS2012 自动生成与部署

    思路: 每日构建,自动生成,然后从TFS提交日志中提取版本修订说明,调用打包脚本混淆并生成安装包(系统自带的太锉),最后将相关文件复制到指定网站供浏览下载.自动向测试网站发布,自动生成数据库并初始化. ...

  9. WPF学习之路（七）应用程序和窗口（续）

    窗口的生命周期 WPF中一个Window类代表一个窗口 一个的窗口的生命周期也有好几个阶段: 1.构造器被调用 2.Window.Initialized事件被触发 3.Window.Activated ...

  10. Java内存泄露简述

    Java的一个最显著的优势是内存管理.你只需要简单的创建对象而不需要负责释放空间,因为Java的垃圾回收器会负责内存的回收.然而,情况并不是这样简单,内存泄露还是经常会在Java应用程序中出现. 本篇 ...