AngularJS入门大宝剑

作者: 空气KQ | 来源:发表于2019-05-24 16:24 被阅读0次

AngularJS入门大宝剑
品优购学习笔记三- AngularJS入门学习
AngularJs 路由与多视图，ng-view指令和 UI-R
不用搭环境的10分钟AngularJS指令简易入门01（含例子）
AngularJs作用域理解
AngularJs入门，一个简单的demo
AngularJS入门案例
AngularJs作用域事件路由与广播，$broadcast和$
AngularJs作用域高级特性，作用域属性监视、digest循
JavaScript日记——Angularjs入门指南

有点类似vue，单又不同
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

标识符开始

<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>
</div>

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。
ng-model指令把输入域的值绑定到应用程序变量 name。
ng-bind指令把应用程序变量 name 绑定到某个段落的 innerHTML。
ng-init 指令初始化 AngularJS 应用程序变量。
data-ng-init="firstName='John'"
AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 控制器（Controller）用于控制

<div ng-app="myApp" ng-controller="myCtrl">
 
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

表达式

数字

 <ng-init="quantity=1;cost=5">

AngularJS 字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

AngularJS 对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
<p>姓为 {{ person.lastName }}</p>
 
</div>

AngularJS 数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三个值为 {{ points[2] }}</p>
 
</div>

AngularJS 指令

ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

重复 HTML 元素,说白了就是遍历

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 
<p>循环对象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
 
</div>

创建自定义的指令

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
这点在VUE里面叫组建

<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

</body>

你可以通过以下方式来调用指令：
元素名
属性
类名
注释
以下实例方式也能输出同样结果:

限制使用

restrict 值可以是以下几种:

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

<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>"
    };
});
</script>

ng-disabled 指令

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}

ng-show 指令隐藏或显示一个 HTML 元素。

ng-hide 指令用于隐藏或显示 HTML 元素。

ng-click 指令定义了 AngularJS 点击事件。

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

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

AngularJS 模型

初始化变量

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

双向绑定

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

验证用户输入

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

状态

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

CSS 类

ng-model 指令根据表单域的状态添加/移除以下类：

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

AngularJS Scope(作用域)

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

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

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

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用

AngularJS 控制器

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

AngularJS 过滤器,过滤器可以使用一个管道字符（|）添加到表达式和指令

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

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

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

自定义过滤器

<body>

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


姓名: {{ msg | reverse }}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});
</script>

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务，或使用内建服务。

$http 服务

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

$timeout 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务,说败了就是定义一个类，然后赋值过去

<p>255 的16进制是:</p>

<h1>{{hex}}</h1>

</div>

<p>自定义服务，用于转换16进制数：</p>

<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({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

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

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

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

AngularJS Select(选择框)

 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>

AngularJS 包含

<body ng-app="">
 
<div ng-include="'runoob.htm'"></div>
 
</body>

AngularJS 动画

<body ng-app="ngAnimate">
<body ng-app="ngAnimate">

隐藏 DIV: <input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck"></div>

</body>

div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}
</style>
<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>
</head>
<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

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

AngularJS 路由

通常我们的 URL 形式为 http://runoob.com/first/page，但在单页 Web 应用中 AngularJS 通过 #! + 标记 实现，例如：

http://runoob.com/#!/first
http://runoob.com/#!/second
http://runoob.com/#!/third

<body ng-app='routingDemoApp'>
 
    <h2>AngularJS 路由应用</h2>
    <ul>
        <li><a href="#!/">首页</a></li>
        <li><a href="#!/computers">电脑</a></li>
        <li><a href="#!/printers">打印机</a></li>
        <li><a href="#!/blabla">其他</a></li>
    </ul>
     
    <div ng-view></div>
    <script>
        angular.module('routingDemoApp',['ngRoute'])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider
            .when('/',{template:'这是首页页面'})
            .when('/computers',{template:'这是电脑分类页面'})
            .when('/printers',{template:'这是打印机页面'})
            .otherwise({redirectTo:'/'});
        }]);
    </script>

配置

angular.module('routingDemoApp',['ngRoute'])

输出内容

使用 ngView 指令。

配置 $routeProvider，AngularJS$ routeProvider 用来定义路由规则
路由配置对象语法规则如下：

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

AngularJS入门大宝剑
有点类似vue，单又不同AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript ...
品优购学习笔记三- AngularJS入门学习
AngularJS入门学习 1.1 AngularJS简介 AngularJS 诞生于2009年，由Misko ...
AngularJs 路由与多视图，ng-view指令和 UI-R
AngularJs 路由与多视图基于AngularJS入门与进阶（江荣波著）这本书的笔记 AngularJS ...
不用搭环境的10分钟AngularJS指令简易入门01（含例子）
不用搭环境的10分钟AngularJS指令简易入门01（含例子） AngularJS的指令是一大特色之一，可以将控...
AngularJs作用域理解
AngularJs作用域理解基于AngularJS入门与进阶（江荣波著）这本书的笔记 AngularJS 1....
AngularJs入门，一个简单的demo
AngularJs入门，一个简单的demo 基于AngularJS入门与进阶（江荣波著）这本书的笔记 Angul...
AngularJS入门案例
AngularJS入门 AngularJS核心的特性就是：MVC模式、模块化、双向绑定、依赖注入等特性。利...
AngularJs作用域事件路由与广播，$broadcast和$
基于AngularJS入门与进阶（江荣波著）这本书的笔记 AngularJS 1.x的demo AngularJ...
AngularJs作用域高级特性，作用域属性监视、digest循
AngularJs作用域高级特性，作用域属性监视、digest循环等基于AngularJS入门与进阶（江荣波著...
JavaScript日记——Angularjs入门指南
本系列博客采用的Angularjs1.3进行开发要入门Angularjs主要掌握以下概念 1.数据绑定（MVC）...