angularJs知识点

什么是angularJs

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库
各个 angular.js 版本下载: https://github.com/angular/angular.js/releases

angularJs的使用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令指明了应用, ng-controller 指明了控制器。
一个应用app下可以有多个控制器controller

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

<p>尝试修改以下表单。</p>

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

</body>
</html>

angularJs指令

  1. ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的根元素
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。

  1. ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值。

  1. ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据

  1. ng-repeat指令

  2. 自定义指令

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

举例:

<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

</body>
  1. $scope

AngularJS 应用组成如下:

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

展开阅读全文

没有更多推荐了,返回首页