AngularJS基础学习笔记

 

• Angular是什么？优点？

  • 前端MVC框架

  • 克服了HTML在构建应用上的诸多不足

• 特点

  • jQuery以dom为驱动(核心)

  • angularjs以数据和逻辑作为驱动(核心)

  • 最核心的是：模块化、双向数据绑定、语义化标签、依赖注入

• MVC是一种开发模式

  • M-->model一般用来处理数据(读取/设置)，一般用来操作数据库

  • V-->view一般用来展示数据，比如通过HTML展示

  • C-->controller一般用做连接模型和视图的桥梁

• thinkPHP：

  __PUBLIC__==>得到thinkPHP中的public的路径 assign(title,$title)$title内容分配给title：数据分配 assign(赋值给谁,变量)

• 模块化

  • 一旦引入angularJS框架，就会提供一个全局的对象：angular，此对象下有N多方法，其中module方法可以帮我们创建一个模块

    var App = angular.module('App',[]);

    App就是新创建的模块，这个模块又是一个对象，此对象下又有N多方法，可以实现具体业务逻辑

    所以真正实现业务的是App，angular.module()只是构造一个模块

  • App.controller('DemoCotroller',['$scope',function($scope){}]);第一个参数是控制器名称

    • 使用套路：

      要使用ng-app指定联合那个模块，使用ng-controller指定是那个控制器

    • 使用方法：

      <div class="box" **ng-app='App'**>
            <div **ng-controller='DemoCotroller'**>
           <h1>{
              {name}}在{
              {school}}学习使用angularjs</h1>
            </div>
         </div>
         <!-- 引入angularJS框架 -->
         <script src="js/angular.js"></script>
         <script> 
         **var App = angular.module('App',[]);**
         **App.controller('DemoCotroller',['$scope',function($scope){
          // $scope是一个空的对象，此对象就是model
          $scope.name = 'zs';
          $scope.shool = '微博';
         }]);**
         </script>

• 指令：

  • 内置指令：

    • ng-repeat='(key,数组别名) in 数组名' { {数组别名}}可以得到一个个的数组内容 { {key}}可以得到索引

    • ng-app：制定应用根元素，至少有一个元素指定此属性

    • ng-controller：指定控制器

    • ng-show ：控制元素是否显示，true显示

    • ng-hide：控制元素是否隐藏，true隐藏

    • ng-if：控制元素是否存在，true存在、false不存在

    • ng-src：增强图片路径

    • ng-href：增强地址

    • ng-class='{类名:布尔值}'：控制类名，true类名有效，false类名无效

      • 值可以是字符串，对象或者一个数组，字符串多个用空格分隔，数组可以由字符或对象组成。

    • ng-bind：绑定

    • ng-include：引入模块，必须放在服务器下面，js本身是读取不了本地文件的

    • ....

  • 自定义指令：angularjs自定义指令就是HTML属性或者标签，这些指令都是以ng-作为前缀

    • 通过模块实例对象的directive()方法可以自定义指令

      App.directive('指令名',function(){
           return{
              restrict:'EM',
              template:'想要表达的模板',
              templateUrl:'引入外来模板的路径'
           }
         })
         <--directive:tag-->  注释
         E(Element)表示该指令是一个element; A(Attribute)表示该指令是attribute; 
         C(Class)表示该指令是class; M(Mark replace)表示该指令是注释,必须为true否则出不来

• 数据绑定

  • 单向绑定：

    • 将模型(model)数据绑定到视图(view)上

  • 双向绑定：

    • 模型向视图、视图向模型

  • 单项绑定：

    *注意*：ng-bind="表达式"  可以解析
            ng-bind-template='字符串'  不可以解析
            所以ng-bind后直接是name可以自己去解析，ng-bind-template后面是{
          {}}，{
          {}}解析后的返回值再作为字符串给ng-bind-template

    • { {}}和ng-bind指令来实现模型(model)数据向视图(view)的绑定

    • { {}}是ng-bind的另一种写法，优点：更简单 缺点：会有一瞬间的闪动，可以通过添加ng-cloak来解决此问题，原理：添加style样式，设为none等angular编译后在设为block