AngularJS Notes

wangzihahaha

于 2019-03-19 17:10:44 发布

阅读量172

点赞数 1

分类专栏： Web学习文章标签： AngularJS JavaScript Web Front End

Web学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Abstraction

懒得写了

How AngularJS Works

例子

一个简单的例子，from 菜鸟教程

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

Elements of a ng program:

AngularJS 应用组成如下(可以写到一个文档里面也可以分开写)：

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

指令 Directive

AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-app

说白了就是告诉AngularJS，哪一个tag元素是这个app所有的。

“myApp” 参数对应执行应用的 HTML 元素。
可以在 AngularJS 应用中添加ng-controller，directive(指令)，过滤器(格式化数据，转化字符串)等。

一个app就是一个module，可以用angular.module()来创建

ng-controller

作为参数，也就是交互内容的部分。
sample:

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

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

ng-model

用来绑定app数据和 HTML controller(input, select, textarea)的值。
<input ng-model = "name"; 用controller来操作ng-model

ng-bind / {{}}

{{ data }} or ng-bind（the same）
和ng-model对应的元素进行同步

scope

$scope 是JavaScript onject!! 指向HTML

连接JavaScript controller 和 HTML的内容
$scope.a 即HTML中的{{a}}，HTML能获得$scope对象的属性

scope 的作用域是什么？什么是%rootscope

Projects

整体的思路是把网页变得模块化。比如我想要一个header能够给很多页面添加，那么我们可以先完成：包含header的HTML文件，它的model以及controller。
怎么样完成View, Model, Controller 是重点
如果想要实现从一个页面通过onClick到多个页面，那么可以用angular-route，实现在页面之间切换。

完成一个基本的能操作的header

包括这些文件，下面header.js 是model
View：就是一个<div> 来显示header，ng-bind用来传进来数据

<div>
    <div class="header" ng-bind="myHeader()"></div>    
</div>

Model：

'use strict';
var cs142models;

if (!cs142models) {
   cs142models = {};
}

cs142models.headerModel = function () {
   return ['this is the header'];
};

Controller：myHeader 会得到cs142models()的返回值

'use strict';
cs142App.controller('HeaderController', ['$scope', function ($scope) {

    // console.log('window.cs142models.headerModel()', window.cs142models.headerModel());
    $scope.myHeader = function() {
        var obj = window.cs142models.headerModel();
        return obj[0];
        // $scope.headerContent = window.cs142models.headerModel().headerContent;
    };
}]);

创建一个header模块并可以被多个网页调用

上一个完成的component并不能直接用，要<header ng-include="'components/header/headerTemplate.html'" ng-controller="HeaderController"></header> 才可以
ng-include 可以把别的网页导入进来显示
将header添加到别的HTML里面(假设为example)。
注意到example 的head里面有很多<script>，需要包含这个被引入的header
example 中的mainController是操纵整个这个example页面的

example.html

<!doctype html>
<!--Defined everything in side the html tag to be an angular view template with the
controller named MainController.-->
<html ng-app="cs142App" ng-controller="MainController">
    <head>
        <script src="node_modules/angular/angular.js"></script>
       
        <script src="components/header/headerController.js"></script>
        <link rel="stylesheet" type="text/css" href="components/header/header.css" />
        <script src="modelData/header.js"></script>
    </head>
    <body>
        <header ng-include="'components/header/headerTemplate.html'" ng-controller="HeaderController"></header>
    </body>
</html>

显示输入在输入框中的内容

in View:
- prompt is: Input some text
- 输入text，并且通过ng-model(也就是找textInput)来传递我的输入
- {{textInput}}会显示我输入的内容在页面上

<label class="cs142-example-output">Input some text: <input type="text" ng-model="textInput"></label>

<p>
	and characters typed into the box will appear in the scope variable 
	<code>textInput</code>
	which currently has a value of "{{textInput}}".
</p>

创建一个按钮并在实现调用两个不同的网页

ng-if 实现在div中切换
- ng-if 指令用于在表达式为 false 时移除 HTML 元素。
- 如果 if 语句执行的结果为 true，会添加移除元素，并显示。

View: 通过controller得到viewName

<button ng-click="switchView(viewName)">Switch to {{viewName}}</button>
    <div ng-if = "viewName === 'example'" ng-include="'components/example/exampleTemplate.html'" ng-controller="ExampleController"></div>
    <div ng-if = "viewName === 'states'" ng-include="'components/states/statesTemplate.html'" ng-controller="StatesController"></div>

Controller：control the content of ‘‘viewName’’, and hint clicking to chang the content

var cs142APP = angular.module('cs142APP', []);
cs142App.controller('MainController', ['$scope', function($scope) {
   // We defined an object called 'main' with a single property 'title' that is used
   // by the html view template to get the page's title in the browser tab.
   
   $scope.viewName = 'example'; 
   // control the button 
   $scope.switchView = function (viewName){
      if($scope.viewName === 'example') {
         $scope.viewName = 'states';
      } 
      else if($scope.viewName === 'states') {
         $scope.viewName = 'example';
      }
   };
}]);

Building a Single Page APP

实现选项可以跳转，就像下图所示我可以选
ngRoute module
<script src="node_modules/angular-route/angular-route.min.js"></script>需要被包含在可以跳转的html里面

Controller:

var cs142App = angular.module('cs142App', ['ngRoute']);	
cs142App.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/example', {
        templateUrl: 'components/example/exampleTemplate.html',
        controller: 'ExampleController'
      }).
      when('/states', {
        templateUrl: 'components/states/statesTemplate.html',
        controller: 'StatesController'
      }).
      otherwise({
        redirectTo: '/example'
      });
  }]);

View: 加列表是为了好排版

<ul>
        <li>
            <a class="active" href="#!example">Examples</a>
        </li>
        <li>
            <a href="#!states">States</a>
        </li>
</ul>
    <div ng-view ></div>