Angularjs

最新推荐文章于 2019-07-23 10:59:39 发布

Ru骨相思

最新推荐文章于 2019-07-23 10:59:39 发布

阅读量315

点赞数 1

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/zhang123569764/article/details/76277879

版权

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AngularJS 指令

1、ng-app=” ” 定义angularJS的使用范围；
2、ng-init=”变量=值;变量=’值’” 初始化变量的值，有多个变量时，中间用分号隔开；
3、ng-model=”变量” 定义变量名；
4、ng-bind=”变量” 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。
5、ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
6、ng-init 指令初始化 AngularJS 应用程序变量。
7 HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效
8 AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
9 ng-repeat指令遍历数组,
10 ng-app 指令初始化一个 AngularJS 应用程序。
11 ng-init 指令初始化应用程序数据。
12 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
数据的双向绑定

ng-model 指令 绑定 HTML 元素 到应用程序数据。
    ng-model 指令也可以：
    为应用程序数据提供类型验证（number、email、required）。
    为应用程序数据提供状态（invalid、dirty、touched、error）。
    为 HTML 元素提供 CSS 类。
    绑定 HTML 元素到 HTML 表单。

13 ng-repeat 遍历数据

13.ng-repeat 遍历数据例子:
 <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>

<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
 <li data-ng-repeat="x in names">
      {{ x }}
输出:      Jani
          Hege
          Kai

14 创建自定义的指令
directive函数来添加自定义的指令 { 元素名,属性,类名,注释 }
例子:

//标签
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});

//
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<div runoob-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

15 CSS 类
ng-invalid:未通过验证的表单
ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true
ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过
ng-touched:布尔值属性，表示用户是否和控件进行过交互
ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
</head>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myName" ng-model="myText" required>
</form>

<p>编辑文本域，不同状态背景颜色会发送变化。</p>
<p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>

16 AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
Scope 概述
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

根作用域所有的应用都有一个 $rootScope

<div ng-app="myApp" ng-controller="myCtrl">

<h1>姓氏为 {{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

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

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

17
1、uppercase，lowercase 大小写转换

{{ "lower cap string" | uppercase }}   // 结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}      // 结果：tank is good

2、date 格式化

{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

3、number 格式化（保留小数）

{{149016.1945000 | number:2}}

4、currency货币格式化

{{ 250 | currency }}            // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }}  // 结果：RMB ￥ 250.00

5、filter查找

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集
 // 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}

6、limitTo 截取

{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

7、orderBy 排序

// 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}

// 根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}

18 AngularJS 服务(Service)
$location 服务，它可以返回当前页面的 URL 地址。

<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>

<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>

$http 服务

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

创建自定义服务
你可以创建访问自定义服务，链接到你的模块中：

创建名为hexafy 的访问:
<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
使用格式：

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

通用例子:
<script>
var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'http://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });

});
</script>

简写方法实例
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
  .then(function (response) {$scope.names = response.data.sites;});
});
</script>

使用 ng-options 创建选择框
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
ng-repeat 有局限性，选择的值是一个字符串

使用 ng-options 指令，选择的值是一个对象:
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>你选择的值是: {{selectedSite}}</h1>

ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素
ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。
你可以使用表达式来计算布尔值（ true 或 false）
ng-hide 指令
ng-hide 指令用于隐藏或显示 HTML 元素。

AngularJS 事件
AngularJS 有自己的 HTML 事件指令。
ng-click 指令
ng-click 指令定义了 AngularJS 点击事件

<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我！</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>

属性                  描述
$dirty           表单有填写记录
$valid           字段内容合法的
$invalid         字段内容是非法的
$pristine        表单没有填写记录

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant
value

Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);

   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

factory
factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};

   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

var mainApp = angular.module("mainApp", []);
mainApp.value("defaultInput", 5);

mainApp.factory('MathService', function() {
    var factory = {};

    factory.multiply = function(a, b) {
        return a * b;
    }
    return factory;
});

mainApp.service('CalcService', function(MathService){
    this.square = function(a) {
        return MathService.multiply(a,a);
    }
});

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
    $scope.number = defaultInput;
    $scope.result = CalcService.square($scope.number);

    $scope.square = function() {
        $scope.result = CalcService.square($scope.number);
    }
});

provider
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  

         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

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

mainApp.config(function($provide) {
    $provide.provider('MathService', function() {
        this.$get = function() {
            var factory = {};

            factory.multiply = function(a, b) {
                return a * b;
            }
            return factory;
        };
    });
});

mainApp.value("defaultInput", 5);

mainApp.service('CalcService', function(MathService){
    this.square = function(a) {
        return MathService.multiply(a,a);
    }
});

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
    $scope.number = defaultInput;
    $scope.result = CalcService.square($scope.number);

    $scope.square = function() {
        $scope.result = CalcService.square($scope.number);
    }
});

ng-show ng-if
当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。
ng-if重新创建元素时用的是它们编译后的状态。如果ng-if内部的代码加载之后被jQuery修改过（例如用.addClass），那么当ng-if的表达式值为false时，这个DOM元素会被移除，表达式再次成为true时这个元素及其内部的子元素会被重新插入DOM，此时这些元素的状态会是它们的原始状态，而不是它们上次被移除时的状态。也就是说无论用jQuery的.addClass添加了什么类都不会存在了。而ng-show和ng-hide则可以保留dom元素上次修改后的状态。

当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从它的父作用域生成一个新的作用域。也就是说ng-if会新建作用域，而ng-show和ng-hide则不会。
ng-if会移除dom，生成dom，而ng-show只是改变其display属性

constant
constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");

AngularJS 路由

路由，就是网络数据或者请求进行分发的一个网络组件。
路由就是一个用于请求URL分发和跳转的一个应用组件，Angular中通过$routeProvider路由服务提供者进行核心的配置处理。
ng路由
ng 路由是 angularjs 官方提供的一种简单的路由操作。
ng 路由主要分三个组成部分：路由指令、路由服务、路由服务提供者

路由指令:ng-view
ngView指令主要用于将路由指向的页面渲染到当前页面的布局中。

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>  //注意引包顺序 必须在angular.js后面
</head>
<body ng-app="s1.app">
<div>
    <a href="#/list">list</a>
    <a href="#/detail/0">张三</a>
    <a href="#/detail/1">李四</a>
    <a href="#/detail/2">王五</a>
    <a href="#/detail/3">赵六</a>
</div>
<div ng-view></div>
<script>
    var app = angular.module('s1.app', ['ngRoute']);
    app.service('DataService', function () {　　//创建DataService服务
        this.getList = function () {
            return [
                {name: '张三', tel: '13333333333'},
                {name: '李四', tel: '13433333333'},
                {name: '王五', tel: '13533333333'},
                {name: '赵六', tel: '18666666666'},
            ]
        }
    });
    app.controller('ListController', function ($scope) {　　//创建ListController控制器 用来指定路由中的控制器
        $scope.msg = 'list controller'
    });
    app.controller('DetailController', function ($scope, $routeParams, DataService) {　　//穿件Detail控制器 用法和上个一样
        var index = $routeParams.index;
        $scope.data = DataService.getList()[index];
    });
    app.config(function ($routeProvider) {
        $routeProvider
                .when('/list', {
                    template: '<div>{{msg}}</div>',
                    controller: 'ListController'
                })
                .when('/detail/:index', {
                            template: '<div>{{data}}</div>',　　//这里可以用templateUrl用来指定模板,模板中不可以有路由模块嵌套
                            controller: 'DetailController'
                        }
                )
    })
</script>
</body>
</html>

ui路由
Angular官方提供的 ng 路由已经具备了非常强大的功能，但是在某些情况下存在一些不太好用的地方，
项目中如果出现大量路由深层嵌套话官方的ng路由来处理就不是非常适合了。

第三方提供了一种强大的路由处理功能，对于路由嵌套也可以非常简单的进行处理。

ui-route：ui路由，第三方路由
ui路由，主要的功能是项目中的路由操作，和官方的ng路由相比较，它的处理方式更加简洁和易用，尤其是涉及到项目中大量路由嵌套时，使用ui路由能更加快捷方便的完成项目中路由的跳转处理。

ui-view：指令
ui -view是 ui 路由中模板页面用于数据展示的指令，可以作为标签的属性出现，同样也可以作为标签的属性出现

> 同时可以给 ui -view 指令命名，用于在路由跳转时对应名称的 ui -view 上展示对应的数据

<!DOCTYPE html>
<html lang="en" ng-app="s9.app">
<head>
    <meta charset="UTF-8">
    <title>简单的例子：基础路由</title>
    <script src="../jquery.js"></script>
    <script src="../angular.js"></script>
    <script src="../angular-ui-router.js"></script>
    <style>
        .content{
            margin: 10px;
            border-top:1px solid silver;
        }
        .view{
            border:1px solid orange;
            min-height: 300px;
            padding: 5px;
        }
    </style>
</head>
<body>
当前页面状态：{{getCurrentState()}}
<div class="nav">
    <a ui-sref="index">index</a>
    <a ui-sref="about">about</a>
    <a ui-sref="detail({id:1,name:'张三'})">detail</a>  //这个是带参数的路由
</div>
<div class="content">
    <div>ui-view:</div>
    <div class="view" ui-view></div>
</div>
<script>

/**
 * Created by GlassTea on 2016/9/24 0024.
 */
angular.module('s9.app', ['ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('index', {    　　　　　　　　　　　　//路由匹配规则
                url: '/index',
                template: '<div>msg from index page: {{data.msg}}</div>',
                controller: function ($scope) {
                    var data = $scope.data = {};
                    data.msg = 'hello, this is index page.'
                }
            })
            .state('about', {
                url: '/about/',
                template: '<div>msg from about page: {{data.msg}}</div>',
                controller: function ($scope) {
                    var data = $scope.data = {};
                    data.msg = 'hello, this is about page.'
                }
            })
            .state('detail', {
                url: '/about/:id/:name',
                template: '<div>msg from detail page: {{data.msg}}</div>',
                controller: function ($scope, $stateParams) {
                    var data = $scope.data = {};
                    data.msg = $stateParams;
                }
            })
65         $urlRouterProvider.otherwise('/index');   //没有配置的状态就可以跳到 ‘/index’状态
    })
    .run(function ($rootScope, $state, $stateParams) {
        window.getState = function () {
            return $state;
        };
        window.getStateParams = function () {
            return $stateParams;
        };
    });
</script>
</body>
</html>

总结：两者区别
① ng路由实现不了多页面应用
② ui路由：更加方便地处理路由嵌套，在state（）函数中进行即可。
③ngRoute 和 ui-route 相比:

   $when —> $state      路由状态配置的时候           

   $routeParams —> $stateParams    带参数的时候的配置

   $routeProvider —> $stateProvider    依赖注入的模块

   <div ng-view></div>  —>  <div ui-view></div>   页面中绑定的指令

Ru骨相思

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angularjs

1、ng-app=” ” 定义angularJS的使用范围； 2、ng-init=”变量=值;变量=’值’” 初始化变量的值，有多个变量时，中间用分号隔开； 3、ng-model=”变量” 定义变量名； 4、ng-bind=”变量” 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。 5、ng-bind 指令把应用程
复制链接

扫一扫

专栏目录