Angular.js -- 基础（1）

最新推荐文章于 2018-10-07 21:19:37 发布

Lazy_Life

最新推荐文章于 2018-10-07 21:19:37 发布

阅读量342

点赞数

分类专栏： Angular.js 和 Angular2.. 文章标签：前端框架 MVC模块开发

本文链接：https://blog.csdn.net/lazy_life/article/details/81075517

版权

Angular.js 和 Angular2.. 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.Angular 介绍（Chorme公司）：

（1）Angular.js 是一个 JavaScript 框架，它可通过 <stript> 标签添加到 HTML 页面中（建议放到 <body> 元素的底部）；

（2）Angular.js 通过指令扩展了 HTML，且通过表达式绑定到 HTML 中；

（3）Angular.js 的特征：模块化；双向数据绑定；标签语义化；依赖和注入；

（4）Angular.js 是 MVC 开发模式（或者也可以称为 MVVM 开发模式）；

2.MVC 开发模式：

（1）MVC 全称：model（模块） views（视图） Controller（控制器）；

model：一般是用来处理数据（读取，设置），操作数据库；

views：一般用来展示数据，也是 HTML 页面上的显示；

Controller：一般用来做连接 model 和 views 的一个桥梁；

3.使用 bower 下载安装 angular：

（1）bower 初始化：bower init；

（2）安装 angular：bower install angular --save；（可通过 .bowerrc 更改管理安装包的默认文件夹）

（3）在 HTML 中引用 angular.js 文件；

4.Angular.js 中的指令（部分）：

（1）在 HTML 中两个必须要有的指令：

ng-app=" "：这个可写在任何标签中，表示 angular 要管理这个标签内的代码；

ng-controller=" "：这个是 angular 指定的控制器；

（2）数据绑定的指令：

{{ }}；ng-bind=" "；

<div ng-app="App">      //创建模块，指定angular要接管的元素
    <ul ng-controller="Demo">        //创建一个控制器
        //下面这两种指令页面中有时会有数据闪烁的效果；
        <li>{{name}}:{{age}}</li>      
        <li ng-bind="name"></li>       //官方推荐使用
        //下面这两种指令可以解决闪烁的效果（不常用）；
        <li ng-clock>{{name}}:{{age}}</li>
        <li ng-bind-template="{{name}}:{{age}}"></li>
        //以上四个都是数据绑定的指令；但是 ng-bind 只能写入一个数据；
    </ul>
</div>
<script>
    //angular是一个全局对象，底下有很多的方法和属性；
    //创建一个模块
    var App = angular.module("App",[]);     
    //第一个参数是自己创建的模块，第二个参数是数组，里面存放需要用到的模块；
    //App就是新创建好的模块，底下也是有很多的方法和属性；
    App.controller("Demo",["$scope",function($scope){
        $scope.name = "jack";
        $scope.age = "22"
    }])
    //第一个参数是自己的控制器的名称，第二个参数是数组，里面是依赖和注入的部分；
    //$scope是一个作用域，是一个空的对象，也是一个model；
</script>

（3）其他指令：

ng-model：把元素的值（input 框中的值）绑定到数据中；

<div ng-app>       //这个指令没有写值的时候，可以不用谢js代码
    <input type="text" ng-model="text">
    <h1>{{text}}</h1>
</div>
//结果：input 框中输入的值会实时的更新在 h1 标签中；

ng-repeat：就是 js 中的循环；

<body ng-app="App">
    <div ng-controller="Cycle">
        //第一种循环方式
        <ul ng-repeat="data in arr">
            <li>{{data.uname}}</li>
            <li>{{data.age}}</li>
            <li>{{data.hobby}}</li>
            <li>{{data.game}}</li>
        </ul>
        //第二种循环方式
        <ul>
            <li ng-repeat="data in arr01">{{data.uname}}:{{data.age}}</li>
        </ul>
        //第三种循环方式，可选择某一个值进行输出
        <ul>
            <li ng-repeat="data in arr02" ng-switch on="data">
                <span ng-switch-when="html">{{data}}</span>
                <span ng-switch-when="js">{{data}}</span>
                <span ng-switch-when="css">{{data}}</span>
            </li>
        </ul>
    </div>
</body>
<script>
    var App = angular.module("App",[]);
    App.controller("Cycle",["$scope",function($scope){
        $scope.arr = [{         //数组中单个对象
            "uname" : "jack",
            "age" : 22,
            "hobby" : "吃鸡",
            "game" : "旅游"
        }];
        $scope.arr01 = [          //数组中多个对象
            {"uname" : "小明","age":10},
            {"uname" : "小花","age":20},
            {"uname" : "小伟","age":25}
        ];
        $scope.arr02 = ["html","js","css"]           //数组
    }]) 
</script>

<style>
    .red{
        color:#f00;
    }
</style>
<body ng-app="App">
    <div ng-controller="Demo">
        <ul>
            <li ng-show="true">1.这个指令用来显示，为true时，是显示，反之隐藏</li>

            <li ng-hide="true">2.这个指令用来隐藏，为true时，是隐藏，反之显示</li>

            <li ng-if="true">hello</li>
            //3.判断这个元素是否存在，为true时，表示存在，显示在页面上，为false时，会将这条代码当成注释去解析

            <li><img ng-src="{{path}}">4.用这个指令可以避免发送两次请求</li>

            <li><input type="text" name="" value="123456" ng-readonly="true"></li>
            //5.这个指令为true时，是input框中value的值不可改变,也不可输入内容；

            <li><input type="text" name="" value="123456" ng-disabled="true"></li>
            //6.这个指令为true时，表示这个input框已经禁用；

            <li><button ng-click="show()">7.点击弹出jack</button></li>

            <li ng-class="{red:true,blue:false}">8.这个指令第一个参数是类名，第二个参数为true时，样式显示出来，反之不显示样式</li>

            <li ng-init="name='jack';age=20"> 
                <span>{{name}}</span>
                <span>{{age}}</span>
            </li>
            //9.这个指令是初始化作用域，会将所写的数据显示在页面上
        </ul>
    </div>
    //注：true和false也可以转换成"1"和"0"
    <script>
        var App = angular.module("App",[]);
        App.controller("Demo",["$scope",function($scope){
            $scope.uname = "jack";
            $scope.path = "./images/312745.jpg";
            $scope.show = function(){
                alert($scope.uname)
            }
        }])
    </script>
</body>

5.Angular.js 自定义指令：

<body ng-app="App">
    //模板
    <div tag></div>      //属性
    <div class="tag"></div>      //类名
    <tag></tag>       //元素
    <!-- directive:tag -->       //注释

    <script>
        var App = angular.module("App",[]);
        //通过directive方法自定义指令,第一个参数是自定义的指令，第二个是参数是回调函数；
        App.directive("tag",function(){
            //直接返回一个对象，返回自定义指令中自己写的内容；
            return{
                restrict : "ECMA",
                //指定哪些模板可以使用自定义指令中内容，可随便写；
                // E ：element（元素）
                // C ：class（类名）
                // M ：mark replace （注释），注：replace必须为true，为false不会显示在页面中
                // A ：attribute（属性）
                template : '<h1>hello world</h1>',     //自己所写的内容
                //当 template 为一个地址时，必须要在服务器中去跑；
                //例：templateUrl : "./body.html"   //可在body.html中写入内容    
                replace : true 
                //是否用所写的内容去替换HTML页面中的模板，为true时，会替换；为false时，内容会显示在模板下
            }
        })
    </script>
</body>

Lazy_Life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular.js -- 基础（1）

1.Angular 介绍（Chorme公司）：（1）Angular.js 是一个 JavaScript 框架，它可通过 &lt;stript&gt; 标签添加到 HTML 页面中（建议放到 &lt;body&gt; 元素的底部）；（2）Angular.js 通过指令扩展了 HTML，且通过表达式绑定到 HTML 中；（3）Angular.js 的特征：模块化；双向数据绑定；标签语义化；...
复制链接

扫一扫