angularJS笔记

Posted 2020-10-25 blue星期天

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularJS笔记相关的知识，希望对你有一定的参考价值。

1.angular快速开始

标记ng-app告诉AngularJS处理整个html页并引导应用：
ng-model 指令把输入域的值绑定到应用程序变量 yourname
ng-bind 指令把应用程序变量 yourname 绑定到某个段落的 innerHTML
ng-init 指令初始化 AngularJS 应用程序变量。

例子

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || ‘World‘}}!

        <div ng-app="" ng-init="firstName=‘John‘">
        <p>姓名为 <span ng-bind="firstName"></span></p>
        </div>
    </body>
</html>

2.angularJS应用

例子：

<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>
/*AngularJS 模块定义应用:*/
var app = angular.module(‘myApp‘, []);
/*AngularJS 控制器控制应用:*/
app.controller(‘myCtrl‘, function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

3.angularJS字符串

例子：

<div ng-app="" ng-init="firstName=‘John‘;lastName=‘Doe‘">        
<p>姓名： <span ng-bind="firstName + ‘ ‘ + lastName"></span></p>        
</div>

4.angularJS对象

例子：

<div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}"> 
<p>姓为 {{ person.lastName }}</p> 
</div>
使用ng-bind类似：
<div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}"> 
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div>

5.angularJS数组

例子：

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

6.一个页面创建多个ng-app

1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上。
2.ng-app作用：告诉子元素指令是属于angularJs。
3.ng-app的值可以为空（练习），项目中一定要赋值，后面所说的模块。

例子：

var app1 = angular.module("app1", []); //自动加载

var app2 = angular.module("app2", []); //手动加载
angular.bootstrap(document.getElementById("A2"), [‘app2‘]); // 手动加载2

7.重复html元素

例子：

<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>

8.1创建自定义指令

可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

例子：

<body ng-app="myApp">
/*元素名*/
<runoob-directive></runoob-directive>
以下实例方式也能输出同样结果:
/*属性*/
<div runoob-directive></div>
/*类名*/
<div class="runoob-directive"></div>
/*注释*/
<!-- directive: runoob-directive -->

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

</body>

8.2限制使用自定义指令

通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

例子：

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

以上是关于angularJS笔记的主要内容，如果未能解决你的问题，请参考以下文章

angularjs2 学习笔记组件

angularJS使用ocLazyLoad实现js延迟加载

AngularJS学习笔记

AngularJS笔记