一篇入门AngularJS

目录

  • 1、AngularJS 应用
  • 2、AngularJS 指令
  • 3、AngularJS 表达式
  • 4、AngularJS 模型
  • 5、AngularJS 控制器
  • 6、AngularJS 作用域
  • 7、AngularJS 过滤器
  • 8、AngularJS 服务
  • 9、AngularJS 表格
  • 10、AngularJS 表单
  • 11、AngularJS API
  • 12、AngularJS 包含
  • 13、AngularJS 样式
  • 13、AngularJS 动画
  • 14、AngularJS 依赖注入
  • 15、AngularJS 路由

1、AngularJS 应用

AngularJS 是一个 JavaScript 框架，它可通过 <script> 标签添加到 HTML 页面，<script> 标签可以放置在 <head> 标签中

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

所以，<head> 标签可以写成以下的形式：

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>

AngularJS 通过 指令 扩展 HTML，通过 表达式 绑定数据到 HTML

AngularJS 应用的构成元素如下：

  • 模块 (Module)：定义 AngularJS 应用
  • 视图 (View)：从用户角度看，视图是用户所看到的网页内容；从 AngularJS 角度看，视图是 AngularJS 指令和 AngularJS 表达式经过解析后的 DOM 元素
  • 指令(Directives)：拓展的 HTML 属性，能被 AngularJS 框架识别，根据不同指令完成不同动作
  • 表达式(Expressions)：用于向页面输出信息
  • 模型(Model)：用于展示到页面的数据
  • 控制器(Controller)：用于处理业务逻辑的方法
  • 作用域(Scope)：可以把作用域理解成一个容器，控制器可以从容器中拿出模型数据，也可以往容器中放入模型数据，然后在视图中通过表达式将数据展示给用户
  • 模板(Template)：AngularJS 以 HTML 作为模板语言，AngularJS 模板实际上就是 HTML 片段

2、AngularJS 指令

AngularJS 指令（Directives）是扩展的 HTML 属性，带有前缀 ng-，包含 内置指令 和 自定义指令

（1）内置指令

常见的内置指令列举如下：

  • ng-app：定义 AngularJS 应用程序的根元素，在网页加载完毕时会自动初始化应用程序
  • ng-controller：定义 AngularJS 应用程序的控制器
  • ng-init：初始化 AngularJS 应用程序数据，但是一般使用控制器或模块代替 ng-init 指令
  • ng-model：绑定 HTML 元素到应用 AngularJS 应用程序数据
  • ng-repeat：克隆数组中的每个项 HTML 元素

完整的内置指令请参考：http://www.runoob.com/angularjs/angularjs-reference.html

<body>
    <div ng-app="" ng-init="quantity=1; price=5">
        <h2>价格计算器</h2>
        <p>数量: <input type="number" ng-model="quantity"></p>
        <p>价格: <input type="number" ng-model="price"></p>
        <p>总价: {{quantity * price}}</p>
    </div>
</body>

（2）自定义指令

可以使用 directive 函数添加自定义指令

使用驼峰命名法命名指令，例 testFunction，但是在使用时需要以 - 分割，例 test-function

<body ng-app="myApp">
    <test-function></test-function>
    <script>
    var app = angular.module("myApp", []);
    app.directive("testFunction", function() {
        return {
            template : "<p>自定义指令!</p>"
        };
    });
    </script>
</body>

<!-- 网页显示内容：
    自定义指令!
-->

可以通过以下方式使用指令：

  • 元素名：<test-function></test-function>
  • 属性：<div test-function></div>
  • 类名：<div class="test-function"></div>
  • 注释：<!-- directive: test-function -->

添加 restrict 属性可以设置指令的使用方式，restrict 属性的可选值如下：

  • E：作为元素名使用
  • A：作为属性使用
  • C：作为类名使用
  • M：作为注释使用

restrict 属性的默认值为 EA，即既可以作为元素名使用，也可以作为属性使用

<body ng-app="myApp">
    <div test-function></div>
    <script>
    var app = angular.module("myApp", []);
    app.directive("testFunction", function() {
        return {
            restrict : "A",
            template : "<p>自定义指令!</p>"
        };
    });
    </script>
</body>

<!-- 这个例子通过使用 restrict 属性限制指令只能作为属性使用 -->
<!-- 网页显示内容：
    自定义指令!
-->

注意：HTML5 允许自定义属性，以 data- 开头，AngularJS 允许自定义属性，以 ng- 开头，故我们可以以 data-ng- 开头来让网页对 HTML5 有效

3、AngularJS 表达式

AngularJS 表达式（Expressions）将数据与页面 双向绑定 起来

所谓的双向绑定，简单来说就是界面的操作能实时反映到数据，数据的变更能实时展现到界面

它写在双大括号内 {{expression}}，与 JavaScript 表达式类似，可以包含文字、运算符和变量等

AngularJS 表达式与 JavaScript 表达式有以下的不同：

  • AngularJS 表达式可以写在 HTML 中
  • AngularJS 表达式不支持条件判断，循环及异常
  • AngularJS 表达式支持过滤器
<body>
    <div ng-app="" ng-init="firstName=‘Steve‘;lastName=‘Jobs‘">
        <p>姓名: {{ firstName + " " + lastName }}</p>
    </div>
</body>

<!-- 网页显示内容：
    姓名: Steve Jobs
-->

4、AngularJS 模型

（1）数据绑定

ng-model 指令可以将输入域的数据与 AngularJS 创建的变量 双向绑定 起来

<body>
    <div ng-app="myApp" ng-controller="myController">
        输入值: <input ng-model="value">
        <p>变量值: {{value}}</p>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.value = "Hello";
        });
    </script>
</body>

（2）类型验证

ng-show 指令可以验证用户输入是否合法（number、email、required）

只有在 ng-show 属性返回 true 的情况下才显示提示信息

<body>
    <form ng-app="" name="myForm">
        Email: <input type="email" name="myEmail" ng-model="myText">
        <p ng-show="myForm.myEmail.$error.email">输入的邮箱地址不合法</p>
    </form>
</body>

（3）应用状态

ng-model 指令可以为应用数据提供状态值（invalid、dirty、touched、error）

  • valid：若输入值合法则为 true
  • dirty：若输入值改变则为 true
  • touched：若有点击则为 true
  • error：若输入值不合法则为 true
<body>
    <form ng-app="" name="myForm">
        Email: <input type="email" name="myEmail" ng-model="myText" required>
        <h1>状态</h1>
        <p>Valid: {{myForm.myEmail.$valid}}</p>
        <p>Dirty: {{myForm.myEmail.$dirty}}</p>
        <p>Touched: {{myForm.myEmail.$touched}}</p>
        <p>Error: {{myForm.myEmail.$error.email}}</p>
    </form>
</body>

（4）提供 CSS 类

ng-model 指令基于表单域的状态为 HTML 元素提供了 CSS 类，常见的表单域状态如下：

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <style>
        input.ng-invalid { color: red; }
    </style>
</head>
<body>
    <form ng-app="" name="myForm">
        Email: <input type="email" name="myEmail" ng-model="myText" required>
    </form>
</body>

5、AngularJS 控制器

AngularJS 控制器（Controller）控制 AngularJS 应用程序的数据，它是常规的 JavaScript 对象

ng-controller 指令用于定义应用程序控制器，控制器不仅有属性，而且有方法

<body>
    <div ng-app="myApp" ng-controller="myController">
        名:  <input type="text" ng-model="firstName"><br />
        姓:  <input type="text" ng-model="lastName"><br />
        姓名: {{getName()}}
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.firstName = "Steve";
            $scope.lastName = "Jobs";
            $scope.getName = function() {
                return $scope.firstName + " " + $scope.lastName;
            }
        });
    </script>
</body>

在大型应用程序中，通常把控制器存储在 外部文件 中

此时，只需要把原来 <script> 标签中的内容储存到文件中，然后通过 src 属性引用文件即可

<script src="fileName.js"></script>

6、AngularJS 作用域

AngularJS 作用域（Scope）是应用在 HTML (视图) 和 JavaScript (控制器) 之间的纽带

它用来保存 AngularJS Model 的 对象，有可用的方法和属性

当创建控制器时，可以将 $scope 对象作为参数传入，此时，视图就可以获取这些方法和属性

在视图中，不需要添加 $scope 前缀，只需要添加属性名即可

<body>
    <div ng-app="myApp" ng-controller="myController">
        <input ng-model="name">
        <p>{{greeting}}</p>
        <button ng-click=‘sayHello()‘>点我</button>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.name = "Steve";
            $scope.sayHello = function() {
                $scope.greeting = ‘Hello, ‘ + $scope.name;
            };
        });
    </script>
</body>

所有应用都有一个 根作用域 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中

它是各个控制器中的作用域的桥梁，使用 rootscope 定义的值，可以在各个控制器中使用

<body>
    <div ng-app="myApp" ng-controller="myController">
        <h1>{{fruit}}</h1>
        <ul>
            <li ng-repeat="x in fruits">{{x}}</li>
        </ul>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope, $rootScope) {
            $scope.fruits = ["Apple", "Banana", "Cherry"];
            $rootScope.fruit = "Fruits";
        });
    </script>
</body>

7、AngularJS 过滤器

AngularJS 过滤器可以使用一个管道字符（|）添加到表达式和指令中，用于转换数据

常见的过滤器有：

  • currency：格式化数字为货币格式
  • lowercase：格式化字符串为小写
  • uppercase：格式化字符串为大写
  • orderBy：根据指定表达式排列数组
  • filter：从数组中选择一个子集

（1）在表达式中添加过滤器

<body>
    <div ng-app="myApp" ng-controller="myController">
        <h2>价格计算器</h2>
        <p>数量: <input type="number" ng-model="quantity"></p>
        <p>价格: <input type="number" ng-model="price"></p>
        <p>总价: {{ (quantity * price) | currency }}</p>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.quantity = 1;
            $scope.price = 5;
        });
    </script>
</body>

（2）在指令中添加过滤器

<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>循环对象:</p>
        <ul>
            <li ng-repeat="x in names | orderBy:‘country‘">
            {{ x.name + ‘, ‘ + x.country }}
            </li>
        </ul>
    </div>
    <script>
        app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.names = [
                {name:‘Rain‘,country:‘ England‘},
                {name:‘Steve‘,country:‘England‘},
                {name:‘Tami‘,country:‘America‘}
            ];
        });
    </script>
</body>

（3）自定义过滤器

下面的例子自定义一个过滤器 reverse，用于反转字符串

<body>
    <div ng-app="myApp" ng-controller="myController">
        正常: <input ng-model="string"></p>
        反转: {{ string | reverse }}
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.string = "abcdefg";
        });
        app.filter(‘reverse‘, function() {
            return function(text) {
                return text.split("").reverse().join("");
            }
        });
    </script>
</body>

8、AngularJS 服务

AngularJS 服务（Service）是一个函数或者对象，很多服务都可以使用 DOM 中存在的对象

AngularJS 内建 30 多个服务，同时也允许自定义服务

（1）内建服务

  • $http：核心服务，用于读取远程服务器上的数据
// 简单的 GET/POST 请求如下：
$http({
    method: ‘GET/POST‘,
    url: ‘URL‘
}).then(function successCallback(response) {
        // 请求成功时执行的代码
    }, function errorCallback(response) {
        // 请求失败时执行的代码
});
// 简写如下：
$http.get(‘URL‘, config).then(successCallback, errorCallback);
$http.post(‘URL‘, data, config).then(successCallback, errorCallback);
  • $location：返回当前页面的 URL，它作为参数传递给控制器
<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>{{myUrl}}</p>
    </div>
    <script>
    var app = angular.module(‘myApp‘, []);
    app.controller(‘myController‘, function($scope, $location) {
        $scope.myUrl = $location.absUrl();
    });
    </script>
</body>
  • $timeout：对应 JavaScript 中的 window.setTimeout 函数，按照指定的时间来调用函数
<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>{{greeting}}</p>
    </div>
    <script>
    var app = angular.module(‘myApp‘, []);
    app.controller(‘myController‘, function($scope, $timeout) {
        $scope.greeting = "Hello World!";
        $timeout(function() {
            $scope.greeting = "Hello AngularJS!";
        }, 2000);
    });
    </script>
</body>
  • $interval：对应 JavaScript 中的 window.setInterval 函数，按照指定的周期来调用函数
<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>{{time}}</p>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope, $interval) {
            $scope.time = new Date().toLocaleTimeString();
            $interval(function() {
                $scope.time = new Date().toLocaleTimeString();
            }, 1000);
        });
    </script>
</body>

（2）自定义服务

可以使用 .service 添加自定义指令

<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>10进制下的255 = 16进制下的{{hex}}</p>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.service(‘toHex‘, function() {
            this.myFunc = function(x) {
                return x.toString(16);
            }
        });
        app.controller(‘myController‘, function($scope, toHex) {
            $scope.hex = toHex.myFunc(255);
        });
    </script>
</body>

当创建自定义服务后，可以在控制器，指令，过滤器或者其它服务中使用

9、AngularJS 表格

可以通过 ng-repeat 指令创建一个表格

<body>
    <div ng-app="myApp" ng-controller="myController">
        <table>
            <tr ng-repeat="x in names">
                <td>{{ x.Name }}</td>
                <td>{{ x.Country }}</td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.names = {
                Rain: {Name:‘Rain‘, Country:‘ England‘},
                Steve: {Name:‘Steve‘, Country:‘England‘},
                Tami: {Name:‘Tami‘, Country:‘America‘}
            }
        });
    </script>
</body>

可以通过 $index 服务让表格显示序号

<table>
    <tr ng-repeat="x in names">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
    </tr>
</table>

可以通过 $even 和 $odd 服务区分表格奇偶项

<table>
    <tr ng-repeat="x in names">
        <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
        <td ng-if="$even">{{ x.Name }}</td>
        <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
        <td ng-if="$even">{{ x.Country }}</td>
    </tr>
</table>

10、AngularJS 表单

AngularJS 表单是输入控件的集合，包括 input 元素、select 元素、button 元素、textarea 元素

（1）单选框

使用 input 元素指定 type 属性为 radio 可以创建单选框

ng-model 指令可以双向绑定数据

ng-switch 指令可以根据选择结果显示或隐藏 HTML 区域

<body ng-app="">
    <form>
        请选择一个选项:
        <input type="radio" ng-model="myVar" value="dogs">Dogs
        <input type="radio" ng-model="myVar" value="cars">Cars
        <input type="radio" ng-model="myVar" value="tuts">Tutorials
    </form>
    <div ng-switch="myVar">
        <div ng-switch-when="dogs">
            <h1>Dogs</h1>
        </div>
        <div ng-switch-when="cars">
            <h1>Cars</h1>
        </div>
        <div ng-switch-when="tuts">
            <h1>Tutorials</h1>
        </div>
    </div>
</body>

（2）复选框

使用 input 元素指定 type 属性为 checkbox 可以创建复选框

ng-model 指令可以双向绑定数据

ng-show 指令 / ng-hide 指令可以根据选择结果隐藏或显示 HTML 元素

<body>
    <div ng-app="">
        <form>
            选中复选框，显示标题:
            <input type="checkbox" ng-model="myVar">
        </form>
        <h1 ng-show="myVar">My Header</h1>
    </div>
</body>

（3）文本框

使用 input 元素指定 type 属性为 text 可以创建单行文本框

使用 textarea 元素可以创建多行文本框

ng-model 指令可以双向绑定数据

ng-init 指令可以为数据设置初始值

<body>
    <div ng-app="" ng-init = "firstName=‘Steve‘; lastName=‘Jobs‘">
        <form>
            First Name: <input type="text" ng-model="firstName"><br />
            Last Name: <input type="text" ng-model="lastName"><br />
        </form>
    </div>
</body>

（4）按钮

使用 input 元素指定 type 属性为 button 可以创建按钮

使用 button 元素可以创建按钮

ng-model 指令可以双向绑定数据

ng-click 指令可以定义点击按钮后发生的动作

<body>
    <div ng-app="myApp" ng-controller="myController">
        <button ng-click="set()"> 点我 </button>
        <p>{{value}}</p>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.value = "点击按钮前出现的文本";
            $scope.set = function() {
                $scope.value = "点击按钮后出现的文本";
            };
        });
    </script>
</body>

（5）下拉列表

使用 select 元素可以创建下拉列表

ng-model 指令可以双向绑定数据

ng-option 指令可以创建下拉列表的列表项

<body>
    <div ng-app="myApp" ng-controller="myController">
        <select ng-model="myWeb" ng-options="x for x in webs"></select>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.webs = ["Google", "Baidu", "Bing"];
        });
    </script>
</body>

ng-repeat 指令也可以创建下拉列表的列表项

<body>
    <div ng-app="myApp" ng-controller="myController">
        <select>
            <option ng-repeat="x in webs">{{x}}</option>
        </select>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myController‘, function($scope) {
            $scope.webs = ["Google", "Baidu", "Bing"];
        });
    </script>
</body>

它们之间的区别在于 ng-options 创建的选项是一个对象， ng-repeat 创建的选项是一个字符串

显然，ng-options 更适用于创建一个下拉列表的选项

11、AngularJS API

AngularJS 全局 API 是用于执行常见任务的 JavaScript 函数集合，使用 Angular 对象进行访问

  • lowercase()：转换字符串为小写，自 AngularJS 1.7 之后改为 $$lowercase()
  • uppercase()：转换字符串为大写，自 AngularJS 1.7 之后改为 $$uppercase()
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{ x1 }}</p>
        <p>{{ x2 }}</p>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myCtrl‘, function($scope) {
            $scope.x1 = "hello";
            $scope.x2 = angular.$$uppercase($scope.x1);
        });
    </script>
</body>

<!-- 网页显示内容：
    hello
    HELLO
-->
  • isString()：判断给定的对象是否为字符串
  • isNumber()：判断给定的对象是否为数字
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{ x1 }}</p>
        <p>{{ x2 }}</p>
    </div>
    <script>
        var app = angular.module(‘myApp‘, []);
        app.controller(‘myCtrl‘, function($scope) {
            $scope.x1 = "hello";
            $scope.x2 = angular.isNumber($scope.x1);
        });
    </script>
</body>

<!-- 网页显示内容：
    hello
    false
-->

12、AngularJS 包含

在 AngularJS 中，可以在 HTML 中包含 HTML 文件，主要有 服务端包含 和 客户端包含 两种方式

我们通常使用 HTTP 请求从服务端获取数据，然后将数据写入到客户端（AJAX）

可以使用 ng-include 指令包含 HTML 文件或者 AngularJS 代码

<body ng-app="">
    <div ng-include="‘fileName.htm‘"></div>
</body>

默认情况下， ng-include 指令不允许跨域包含

13、AngularJS 样式

AngularJS 首选的样式表是 Bootstrap，它可通过 <link> 标签添加到 HTML 页面，<link> 标签可以放置在 <head> 标签中

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

如果站点在国内，建议使用百度静态资源库的 Bootstrap

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

13、AngularJS 动画

AngularJS 提供动画效果，可以配合 CSS 使用，它需要引入库 angular-animate.min.js

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需要在应用中使用模型 ngAnimate，可以在设置应用名时，同时添加 ngAnimate 模型

<script>
var app = angular.module(‘myApp‘, [‘ngAnimate‘]);
</script>

实际上，ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，如果事件发生，ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画

AngularJS 添加/移除 class 的指令:

  • ng-repeat
  • ng-show
  • ng-hide
  • ng-switch
  • ng-if
  • ng-view
  • ng-class
  • ng-include
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
        <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular-animate.min.js"></script>
        <style>
            div {
              transition: all linear 0.5s;
              background-color: lightblue;
              height: 100px;
              width: 100%;
              position: relative;
              top: 0;
              left: 0;
            }
            .ng-hide {
              background-color: transparent;
              height: 0;
              width: 0;
              top:-200px;
              left: 200px;
            }
        </style>
    </head>
    <body ng-app="myApp">
        <p>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></p>
        <div ng-hide="myCheck"></div>
        <script>
        var app = angular.module(‘myApp‘, [‘ngAnimate‘]);
        </script>
    </body>
</html>

14、AngularJS 依赖注入

依赖注入（Dependency Injection，DI）是一种软件设计模式

在这种模式下，一个或更多的依赖（或服务）被注入（或通过引用传递）到一个独立的对象（或客户端）中，然后成为客户端状态的一部分

AngularJS 提供 5 个核心组件用来作为依赖注入

  • value：是一个对象，用于向控制器传递值
  • factory：是一个函数，用于返回值
  • service：是一个函数或者对象
<body>
    <div ng-app = "myApp" ng-controller = "myCtrl">
        <p>输入数字: <input type = "number" ng-model = "number" /></p>
        <button ng-click = "square()">计算平方</button>
        <p>得到结果: {{result}}</p>
    </div>
    <script>
        var app = angular.module("myApp", []);

        // 创建 value 对象 "defaultInput"，用于传递数据
        app.value("defaultInput", 5);

        // 创建 factory 函数 "MathService"，用于两数乘积
        app.factory(‘MathService‘, function() {
           var factory = {};
           factory.multiply = function(a, b) {
              return a * b
           }
           return factory;
        }); 

        // 将 factory 函数 "MathService" 注入到 service
        // 创建 service 服务 "CalcService"，用于计算平方
        app.service(‘CalcService‘, function(MathService) {
            this.square = function(a) {
                return MathService.multiply(a,a);
            }
        });

        // 将 value 对象 "defaultInput" 注入到 controller
        // 将 service 服务 "CalcService" 注入到 controller
        app.controller(‘myCtrl‘, function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);
            $scope.square = function() {
                $scope.result = CalcService.square($scope.number);
            }
        });
    </script>
</body>
  • provider：提供一个方法 get()，用于返回 value/factory/service
app.config(function($provide) {
    $provide.provider(‘MathService‘, function() {
        this.$get = function() {
            var factory = {};
            factory.multiply = function(a, b) {
                return a * b;
            }
            return factory;
        };
    });
});
  • constant：用于在配置阶段传递数值，注意这个常量在配置阶段是不可用的

15、AngularJS 路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容，它需要引入库 angular-route.min.js

<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>

还需要在应用中使用模型 ngRoute，可以在设置应用名时，同时添加 ngRoute 模型

<script>
var app = angular.module(‘myApp‘, [‘ngRoute‘]);
</script>

AngularJS 可以通过 #! 标记，实现多视图 (不同的页面内容) 单页 (同一个请求地址) Web 应用

考虑以下两个 URL：http://example.com/#!/first、http://example.com/#!/second

事实上，无论我们点击哪一个链接时，向服务端请求的地址都是一样的 http://example.com

#! 后面内容在发送请求时会被浏览器忽略，所以我们需要在客户端实现 #! 后面内容的功能实现

AngularJS 路由通过 #! 帮助我们区分不同的逻辑页面，并将不同的页面绑定到对应的控制器上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
        <script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>
    </head>
    <body ng-app=‘myApp‘>
        <h1>AngularJS 路由应用</h1>
        <ul>
            <li><a href="#!/">首页</a></li>
            <li><a href="#!/about">关于</a></li>
            <li><a href="#!/archives">归档</a></li>
            <li><a href="#!/categories">分类</a></li>
            <li><a href="#!/tags">标签</a></li>
            <li><a href="#!/other">其它</a></li>
        </ul>
        <div ng-view></div>
        <script>
            app = angular.module(‘myApp‘,[‘ngRoute‘]);
            app.config([‘$routeProvider‘, function($routeProvider){
                $routeProvider
                .when(‘/‘,{template:‘这是首页页面‘})
                .when(‘/about‘,{template:‘这是关于页面‘})
                .when(‘/archives‘,{template:‘这是归档页面‘})
                .when(‘/categories‘,{template:‘这是分类页面‘})
                .when(‘/tags‘,{template:‘这是标签页面‘})
                .otherwise({redirectTo:‘/‘});
            }]);
        </script>
    </body>
</html>

ngView 指令可以根据路由的变化改变 HTML 内容

config 函数可以用于配置路由规则

把 $routeProvider 注入配置函数，并使用 when(path,object) 和 otherwise(object) 函数

参数 path 定义 URL 规则；参数 object 定义 路由配置对象

路由配置对象的语法规则如下：

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});
  • template：如果只需在 ng-view 中插入简单的 HTML 内容，则使用该参数
  • templateUrl：如果需要在 ng-view 中插入 HTML 模板文件，则使用该参数
  • controller：在当前模板上执行的 controller 函数，生成新的 scope
  • controllerAs：指定当前 controller 别名
  • redirectTo：指定重定向的地址
  • resolve：指定当前 controller 所依赖的其他模块

参考资料：

http://www.angularjs.net.cn/tutorial/

http://www.runoob.com/angularjs/angularjs-tutorial.html

https://www.w3cschool.cn/angularjs/

原文地址：https://www.cnblogs.com/wsmrzx/p/10405398.html

时间： 2024-10-09 03:23:24

一篇入门AngularJS的相关文章

[转]怎么样快速入门AngularJS？

本文转自:http://www.ngnice.com/posts/205af1ea1e13d2 怎么样快速学习AngularJS? 相信很多初学者都有过或者类似的疑问,其实这个问题没有标准的答案,每个人的技术背景.工作经验等等都不经相同,所以学习AngularJS的切入点肯定也就不同,我之前初略使用过knockoutjs,当我第一眼看到AngularJS的Helloworld案例后,顿时就被声明式的语法和强大的双向绑定特性所吸引. 其实AngularJS的官方网站首页的几个例子已经很好的展示了A

ensemble 的2篇入门 文章

python 篇: http://machinelearningmastery.com/ensemble-machine-learning-algorithms-python-scikit-learn/ http://machinelearningmastery.com/compare-machine-learning-algorithms-python-scikit-learn/ R 篇: http://machinelearningmastery.com/machine-learning-e

[实战篇入门]02-POI简单创建Excel

周日的小讲堂要讲到这里,趁中午时间写点东西,记录昨天晚上完成的东西,在这里只是简单的介绍如何创建对于样式问题,我不过多的说,因为之后的教程会使用模版方式搞定! 在学习这段代码的时候,希望各位访问Apache的官方网站,里面有快速入门的教程,这是最好的入门方式 --> http://poi.apache.org/spreadsheet/quick-guide.html 这里我建议使用官方文档提高的教程,方便操作 代码如下 1 package com.shxt.poi.write; 2 3 impo

一篇入门 — Scala 宏

前情回顾 上一节, 我简单的说了一下反射的基本概念以及运行时反射的用法, 同时简单的介绍了一下编译原理知识, 其中我感觉最为绕的地方, 就属泛型的几种使用方式了. 而最抽象的概念, 就是对于符号和抽象树的这两个概念的理解. 现在回顾一下泛型的几种进阶用法: 上界 <: 下界 >: 视界 <% 边界 : 协变 +T 逆变 -T 现在想想, 既然已经有了泛型了, 还要这几个功能干嘛呢? 其实可以类比一下, 之前没有泛型, 而为什么引入泛型呢? 当然是为了代码更好的服用. 想象一下, 本来一个

elasticsearch 第一篇(入门篇)

介绍 elasticsearch是一个高效的.可扩展的全文搜索引擎 基本概念 Near Realtime(NRT): es是一个接近实时查询平台,意味从存储一条数据到可以索引到数据时差很小,通常在1s内 Cluster: es是一个分布式.可扩展的平台, 可由一个或多个服务器通过定义的cluster.name(默认为elasticsearch)标识共建同一个集群 Node: 通常一台服务器上部署一台es node,作为集群的一部分,用于数据的存储和提供搜索功能,在一个集群中节点通过node.na

java nio网络编程服务篇入门

服务端写完了,现在写一个客户端,对于客户端,我考虑使用nio或阻塞socket都可以. 使用nio的客户端: 1 /** 2 * 初始化网络连接 3 */ 4 public void run() { 5 6 // 开启网络连接 7 try { 8 channel = SocketUtils.connect("127.0.0.1",8080); 9 selector = Selector.open(); 10 channel.register(selector, SelectionKey

Python基础篇(入门)

一.Python 简介.特性.应用 Python是一门计算机编程语言,Python是一门计算机编程语言,它是由荷兰人Guido van Rossum在1989年圣诞节期间为了打发无聊的圣诞节而编写的,作为ABC语言的继承 特性: 面向对象.解释型.动态.高级的计算机编程语言,官方定义其是优雅.明确.简单. 开源免费.跨平台.移植性,可以在各种系统上使用 说是容易上手.简单易学.功能强大. 涵盖各种功能的标准库.第三方库.  batteries included (称为内置电池) 让开发者把精力放

JMeter工具基础知识篇-入门知识介绍

转载于金阳光测试 JMeter背景知识介绍: 1)  一个100%的纯Java桌面应用,它的用户界面采用Swing Java API实现 2)  Apache软件基金会下的一个子项目,Google在插件方面的持续支持 3)  自1998年发版以来,一直随着时代的发展在持续改进中,从3.0版本开始测试报告变得非常美观 4)  能满足接口功能自动化.批量数据准备.性能测试等多重需求 5)  直观的图形化操作界面,丰富的结果报告图表,强大而易用 6)  它是独立于平台的工具,在Windows / Li

四步轻松安装Geant4 (Linux篇) | 入门

最近开始为订阅号"Geant4不完全学习指南"写一些文章. 正文开始. 软件版本:Ubuntu16.04,Geant4.10.04 预备知识:Linux命令行终端的简单使用 Geant4官方已经适配主流的计算机平台 (Windows, Linux, macOS), 其中在用户数量上以Linux居多.所以我们先从Linux平台上的安装讲起.当然Linux不止有一个系统,而是有不同厂家发行的各种发行版(Ubuntu, CentOS, Fedora, RedHat, Scientific L