AngularJs学习总计-了然宗旨特征(-)

AngularJs学习统计-通晓宗旨特征(-)

 

 
 将来的前端项目中大多都会用到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的路由转换举办的。像大家今日以此类型也是使用的单页面。即在主页面里面,即跳转的页面都在主页面里面进行。截图如下:

    图片 1     

    AngularJs表达式 

    AngularJS 表明式写在双大括号内:{{ expression
}}。

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

    AngularJS 将在表明式书写的职位”输出”数据。

    AngularJS 表明式 很像 JavaScript
表达式:它们可以涵盖文字、运算符和变量。

图片 2

<!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>

图片 3

   AngularJs在html中的应用

 
 首要通过ng-directive扩展html,angularjs指令是以ng作为前缀的html属性,包蕴有四大特点:mvc,模块化,指令系统(directive),databinding

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

图片 4

<!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:</p>
        </div>
     </body>

</html>

图片 5

 
 ng-app:该指令表示定义三个angularjs应用程序。经常位于html后边,也可以在一部分使用ng-app指令,比如<div
ng-app>则angularjs脚本仅在该div中运维,即表明从此处发轫,全数情节均为angularjs进行保管。

   ng-model:该指令是指把成分值(比如输入框的值)绑定到应用程序中。

 
 ng-bind:该指令是把应用程序数据绑定到html视图中。使用相应的通令,即可使用angularjs操作html页面。具体怎么拔取,大家来探望代码。

图片 6

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

 关于$scope解释

 $scope是如何?有如何功能?怎么着利用它?

 简单的话,scope是三个pojo(plainoldjavascriptobject),类似于1个目的,有总体性和办法,scope是2个pojo(plainoldjavascriptobject),类似于一个目的,有总体性和措施,scope提供了watch()和watch()和apply()工具方法。angularjs的mvc全体借助$scope举办的。

 性格:1.是表明式的执行环境(只怕效能域)

         2.scope是三个树型结构,与dom标签平行,其上含蓄3个scope是3个树型结构,与dom标签平行,其上含蓄三个rootscope处于最顶层。

         3.scope会继承父scope会继承父rootscope的特性和艺术。

         4.$scope得以流传事件,类似于dom,能够发展传播也足以向下。

         5.$scope不不过mvc的根底,也是背后完结双向绑定的功底。

 AngularJs的组成部分

 模板:即编写的html和css的文书,显示应用的视图。angularjs可以在html中创设友好的html标记!
 控制器:与ajax不相同,不必要此外编写侦听器或dom控制器,因为它早已嵌入到angularjs中。 好处:便于编写,测试,维护和清楚。
        
 模型数据:模型是从angularjs做用域对象的天性引申的。模型的数额恐怕是js对象,数组或骨干项目,但都属于angularjs功能域对象。

 怎么样知道angularjs中的功用域?

   
 即3个作用域可以当作模板,模型和控制器协同工作的粘接器,angularjs使用功效域,同时还有模板中的新闻,数据模型和控制器。那几个可以匡助模型和视图分离,但她们互相确实时3只的!任何对于模型的更改都会即时反映到视图上,任何视图的变更都会被霎时映未来模型中。

   
 视图:在angularjs中,三个视图是模型通过html模板渲染之后的照耀。即无论模型如何时候发生变化,angularjs会实时更新结合点,随之更新视图。

     依旧贴码来看,越发直观!

图片 7

<!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>

图片 8

我们来探望controller的应用,即控制器,即控制器通过操作数据,将其开展绑定,显示在html页面上。

  AngularJS 模块(Module) 定义了 AngularJS
应用。

  AngularJS 控制器(Controller) 用于决定 AngularJS
应用。

 
ng-app指令概念了利用, ng-controller 定义了控制器。大家用地点的列子来看:

AngularJS模块定义应用:

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

angularjs控制器控制应用:

图片 9

 myModule.controller("helloAngular", ['$scope',
            function HelloAngular($scope) {
                $scope.value = {
                    name: 'jiangting'
                };
            }
        ]);       

图片 10

打听前端mvc

   关于controller特性:

      1.毫不试图去复用controller,二个控制器一般只负责一个小块视图
      2.不要一贯在controller中操作dom,那不是其职分
      3.绝不在controller里面做多少过滤的操作,ng有filter服务4.不要在controller里面做多少格式化,ng有很好用的表单控件5.controller是不会互相调用,控制器之间的交互会通过事件开展,通过filter服务4.毫不在controller里面做多少格式化,ng有很好用的表单控件5.controller是不会相互调用,控制器之间的交互会通过事件开展,通过scope举办调用。

上面看下怎么样自定义指令系统,代码如下:

图片 11

<!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>

图片 12

 
 directive中,前边重临有五个参数,其中template中指所插入的html标签。未来小编门自身来写一段html代码,看看怎样将其变为angularjs的写法。

   原静态html代码如下:

图片 13

 <ul>
          <li>
             new1
             <p>just a test page1</p>
          </li>
          <li>
             new2
             <p>just a test page2</p>
          </li> 
 </ul>

图片 14

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

图片 15

<!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>

图片 16

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

相关文章