AngularJS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28702545/article/details/55518351

angular的入门学习

常用指令

ng-init:初始化model，使用的比较少。

ng-app:angular作用范围

<!--
    所有x需要ng管理的代码必须包裹在ng-app指令的元素中
    表明这是一个angular应用程序
 -->
<body ng-app ng-init="user.name='world'">
<h1>双向数据绑定</h1>
<p><input type="text" placeholder="请输入name" ng-model="user.name"></p>
<p>hello <strong>{{user.name}}</strong></p>

<script src="../../lib/angular/angular.js"></script>

ng-model：模块，一般一个页面只有一个model

<div ng-app="myApp" ng-controller="DemoController">
    <h1>双向数据绑定</h1>
    <p><input type="text" placeholder="请输入name" ng-model="user.name"></p>
    <p>hello <strong>{{user.name}}</strong></p>
    <input type="button" value="获取user" ng-click="show()">
</div>
<script src="../../lib/angular/angular.js"></script>


<script>

    // 1、注册模块
    /**
     * 参数1：模块名字
     * 参数2：所依赖的模块
     * 设置一个参数是查询、两个参数是创建
     */
    var app = angular.module('myApp', []);
    // 2、设置控制器
    // 通过模块来创建一个控制器,这个控制器属于这个模块
    app.controller('DemoController', function ($scope) { // 控制器函数
        // 当控制器执行时会自动执行该函数
        $scope.user = {};
        $scope.user.name = '张三';
        $scope.show = function () {
            console.log($scope.user);
        }
    });

</script>

watch：监视model里面数据的改变。
- 参数1：监视的属性，该属性必须是在$scope里面
- 参数2：回调函数

<div ng-app="module">

    <form ng-controller="LoginController">
        用户名： <input type="text" ng-model="user.username"><br>
        密码： <input type="password" ng-model="user.password"><br>
        <input type="button" value="登录" ng-click="login()">
    </form>
</div>
<script src="../../lib/angular/angular.js"></script>
<script>
    // 1、创建模块
    var module = angular.module("module", []);
    // 2、创建控制器
    module.controller("LoginController", ["$scope", function ($scope) {
        // 初始化数据
        $scope.user = {
            username: '',
            password: ''
        };
        // 行为
        $scope.login = function () {
            // 因为数据变化是双向同步，因此界面上变化值会同步到$scope上
            console.log($scope.user);
        }

        // 使用watch监视username
        $scope.$watch('user.username', function (now, old) {
            console.log("now:" + now);
            console.log("old:" + old);
        });

    }])
</script>

bootstrap：解决一个页面只能有一个model的情况

<script src="../../lib/angular/angular.js"></script>
<div ng-app="app1" ng-controller="App1Controller1">
    <input type="button" value="按鈕1" ng-click="do1()">

</div>
<div ng-app="app2" ng-controller="App2Controller2">
    <input type="button" value="按鈕2" ng-click="do2()">
</div>
<script>
    var app1 = angular.module("app1", []);
    app1.controller("App1Controller1", ["$scope", function ($scope) {
        $scope.do1 = function () {
            console.log(111);
        }
    }]);

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

    app2.controller("App2Controller2", ["$scope", function ($scope) {
        $scope.do2 = function () {
            console.log(222);
        }
    }]);

    // 解决一个只能有一个module的问题
    /**
     *  参数1：通过属性选择器查找管理的元素
     *  参数2：要被管理的模块
     */
    angular.bootstrap(document.querySelector('[ng-app="app2"]'),['app2']);

</script>

ng-repeat：遍历一个集合或则数组

<ul ng-controller="UserController">
    <li ng-repeat="user in users" data-id="{{user.id}}">
        <strong>{{user.name}}</strong>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{user.age}}</span>
    </li>
</ul>


<script src="../../lib/bower_components/angular/angular.js"></script>

<script>
    angular.module("app", [])
            .controller("UserController", ["$scope", function ($scope) {
                // 初始化姓名数组
                $scope.users = [];
                // 填充数据
                for (var i = 1; i < 10; i++) {
                    $scope.users[$scope.users.length] = {
                        id: i,
                        name: '小明' + i,
                        age: 20 + i
                    };
                }
            }])
</script>

ng-class:这个需要注意，它后面接的是一个单大括号({})。


<ul ng-controller="UserController">
    <li ng-repeat="user in users" data-id="{{user.id}}"
        ng-class="{red:$even,green:$odd}"
    >
        <strong>{{user.name}}</strong>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{user.age}}</span>
    </li>
</ul>

ng-if，ng-show/ng-hide：

ng-if:通过删除或者新增结点。
ng-show、ng-hide:通过CSS显示或隐藏DOM节点。

<div class="tips" ng-if="loading">
    loading...
</div>
<script src="../../lib/bower_components/angular/angular.js"></script>
<script>
    angular.module("myApp", [])
        .controller("ListController", ["$scope", "$timeout", function($scope, $timeout) {
            $scope.loading = false;

            $timeout(function() {

                $scope.loading = true;

                $timeout(function () {
                    $scope.loading = false;

                },500) ;

            }, 500);
        }]);
</script>

ng-src：显示图片。

<body ng-app ng-init="imgURL='../22.jpg'" ng-cloak>
<img ng-src="{{imgURL}}" alt="">
<a ng-href="{{imgURL}}">跳转到图片</a>

ng-checked:不会将值双向绑定,只会做数据到视图的同步，不会做视图到数据的同步

自定义指令

自定义指令的步骤比较简单，和创建controller类似。

创建model
通过model创建directive

var module = angular.module('module', []);
    module.directive('liwenButton', [function () {
        // 这个函数应该返回指令
        return {
            template: '<input class="btn btn-lg btn-primary btn-block" value="LiwenButton">'
        };
    }])

这里使用了bootstrap。