angular入門

時間 2021-06-12 標籤 angularjs

本文結合 http://www.noobyard.com/article/p-qprnftbn-ed.html 和http://itindex.net/detail/47465-angularjs-%E6%9C%AC%E7%89%B9

插值表達式

//類中定義的變量，通過{{}}在html中直接使用
在 Angular 中，我們可以使用 {{}} 插值語法實現數據綁定。

值得一提的是，我們可以使用 Angular 內置的 json 管道，來顯示對象信息：

@Component({//it is Component
selector: 'my-app', //selector is template container
template: `
...
<p>{{address | json}}</p>
`,
})
export class AppComponent {
name = 'Semlinker';
address = {
province: '福建',
city: '廈門'
}
}

Component({//it is Component selector: 'my-app', //selector is template container template: ` ... <p>{{address | json}}</p> `, }) export class AppComponent { name = 'Semlinker'; address = { province: '福建', city: '廈門' } }

MVC

上面的例子中，使用了一個studentController， AngularJS中在module上使用controller操作可以爲module定義一個Controller，Controller定義了一個操作的具體行爲。Controller通過依賴注入的服務完成各種操作，然後通過$scope服把view需要的數據傳遞過去。爲保證隔離性，在Controller中一定不要有任何與DOM相關的代碼。定義一個controller如下：

AngularJSSample.controller(['studentController', function ($scope) {
}]);

Directives（指令）

這個特性非常有用，這個特性擴展HTML的表現能力，通過爲DOM對象增加新的屬性指令爲DOM對象定製行爲。使用這個特性可以以更少的代碼構建更加優雅的頁面結構。AngularJS本身內置了一些指令，下面來看一個例子，使用了內置的ng-repeat

<div ng-init="students = [
      {name:'John', age:25, gender:'boy'},
      {name:'Joy', age:15, gender:'girl'},
      {name:'Mary', age:28, gender:'girl'},
      {name:'Sebastian', age:10, gender:'boy'},
      {name:'Samantha', age:16, gender:'girl'}
    ]">

    <div data-ng-repeat="student in students">
        <h3>{
  
  {student.name}}:{
  
  {student.age}}</h3>
    </div>
</div>

上例中，首先通過ng-init指令創建了一個students的對象數組，然後使用ng-repeat指令打印出所有學生的名字和年齡。還可以使用ng-show過濾重複值，只顯示boy：

<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'">
        <h3>{
  
  {student.name}}:{
  
  {student.age}}</h3>
</div>

或者使用ng-switch做一些更復雜的控制,年滿18歲打印ADULT。

<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"
         data-ng-switch="student.age >18">
        <h3>{
  
  {student.name}}:{
  
  {student.age}}</h3>
        <p data-ng-switch-when="true">ADULT</p>
    </div>

這個特性比較殺手級，它爲開發人員省了很多代碼，對定義Web Page Structure非常有幫助。而且除了本身自帶的Directives滿足大部分羣衆的需要，還支持定製Directive滿足你的奇葩需求。

數據綁定（Data Binding）（雙向綁定）

在 Angular 中，我們可以通過 (eventName) 的語法，實現事件綁定。
<date-picker (dateChanged)="statement()"></date-picker>
等價於<date-picker on-dateChanged="statement()"></date-picker>

4.1 單向綁定：.ng-bind="name"和{{name}}：單向顯示$scope綁定的數據，ng-bind爲angularjs自帶顯示數據指令

<h1>{{name}}</h1>
單向綁定的缺點？

4.2 雙向綁定: ng-model="name"：雙向數據綁定，文本框值改變，name值就改變。

例如 <mat-radio-group class="plcm-whitelist-radio" [(ngModel)]="ipType">
<mat-radio-button value="isIPv4">{{IPV4 | translation}}</mat-radio-button>
<mat-radio-button value="isIPv6">{{IPV6 | translation}}</mat-radio-button>
</mat-radio-group>

ipType是雙向綁定，ipV4是單向綁定 (ipV4 is final string 「IPV4」)

，，，，，，，，，，，，，
在AngularJS中，只需要簡單的使用ng-model就可以實現model和view的雙向綁定，任何在view上的修改馬上反應到Model，任何在Model數據上的修改馬上反應到View的展示上。如下：

<div data-ng-repeat="student in students">
        <h3>{
  
  {student.name}}:{
  
  {student.age}}</h3>
        Edit Name: <input type="text" data-ng-model="student.name">
    </div>

過濾器（Filters）
AngularJS通過Filters提供了改變數據展現形式的方法或者過濾部分數據，實現形式就是以‘|’字符分割expression： {{expression|filter1|filter2}}.例如：把student的名字全部展示爲大寫：

 <div data-ng-repeat="student in students">
        <h3>{
  
  {student.name|uppercase}}:{
  
  {student.age}}</h3>
 </div>

和Directive一樣，Filter同樣支持定製：http://docs.angularjs.org/guide/filter。

模塊化（Modules）

在AngularJs中，應用可以拆分爲一個個的小模塊，模塊之間可以相互依賴，這樣各個功能可以非常方便重用和測試。在HTML中使用ng-app指令即可定義一個Module:

<html ng-app=「AngularJSSample」>

然後在javascript中，可以非常簡單的獲取到這個Module，

var AngularJSSample = angular.module('AngularJSSample', []);

之後，你可以爲這個Module了添加你想要得東西了，比方說我們前面提到的定製filter和Directive等。例如爲定義一個Greet Filter:

var AngularJSSample = angular.module('AngularJSSample', []);
AngularJSSample.filter('greet', function() {
    return function(name) {
        return 'Hello, ' + name + '!';
    };
});

另外angular.module方法的第二個參數是用來指定該模塊依賴哪個模塊的。

零件視圖（Partial Views）
AngularJS除了通過ng-app可以把一個應用拆成小模塊，在模塊中，還可以通過ngView定義的頁面模板，然後和Route配合顯示對應的View，這個特性對想寫Single Page Application的同學非常有用。

依賴注入（Dependency Injection）

一個類使用另一個類. 網頁通常一個類對應一個網頁.

創建 MemberService 服務
@Injectable()//it is Injectable
export class MemberService {
constructor(private http: Http) { }
getMembers() {
return this.http
.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
.map(res => res.json()) //將結果轉成任何類型，本例轉成json類型
}
}
配置 MemberService 服務
@NgModule({
providers:[MemberService] //同比自定義Component。Component is declarations: [ AppComponent, UserComponent]
})
使用 MemberService 服務
this.memberService.getMembers()//調用http.get
.subscribe(data => {//訂閱http.get
if (data) this.members = data;
});

providers:[MemberService] //同比自定義Component。Component is declarations: [ AppComponent, UserComponent] }) 使用 MemberService 服務 this.memberService.getMembers()//調用http.get .subscribe(data => {//訂閱http.get if (data) this.members = data; });供了config操作爲一個Module注入依賴的Service，例如我想注入一個「$routeProvider"這個路由服務：

AngularJSSample.config(['$routeProvider', function($routeProvider){
}]) ;

路由（Routes）
配置路由信息

export const ROUTES: Routes = [
{ path: 'user', component: UserComponent }
];
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule,
RouterModule.forRoot(ROUTES)],
// ...
})

配置路由導航

@Component({
selector: 'my-app',
template: `
<div class="app">
<nav>
<a routerLink="/user">我的</a>
<a routerLink="/members">Angular成員</a>
</nav>
</div>
`,
})

實戰項目
dashboard.html: //導航頁
<div <a class="hyperlink" routerLink="/security/global-security">{{ "GLOBAL_SECURITY_NAV" | translation }}</a></div>
app-routing.modules.ts //內部路由

export const appRoutes: Routes = [
{
path: 'security',
children: [
{path: 'global-security', component: GlobalSecurityPage, canActivate: [ConferencingGuard]},
]
}
]

global-security.ts //ts實現網頁
@Component({
template: `
...
`
})
export class GlobalSecurityPage implements OnInit, OnDestroy {
...
}

，，，，，，，，，，，，，，，，，，，，，，，，，，，
AngularJS中，可以直接用javascript定義可用的路由，頁面的跳轉再也不用到服務器去走一圈了（前端自己解決router）

AngularJSSample.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/students', {
        templateUrl: 'views/students.html',
        controller: 'studentsController'
    }).otherwise(
        {
            templateUrl: 'views/greeting.html'
        })
}]);

控制器（Controllers）
上面的例子中，使用了一個studentController， AngularJS中在module上使用controller操作可以爲module定義一個Controller，Controller定義了一個操作的具體行爲。Controller通過依賴注入的服務完成各種操作，然後通過$scope服把view需要的數據傳遞過去。爲保證隔離性，在Controller中一定不要有任何與DOM相關的代碼。定義一個controller如下：

AngularJSSample.controller(['studentController', function ($scope) {
}]);

Scope
Scope就是用來給Controller和View之間做數據傳遞的,Controller往scope中添加的任何數據，View都可以訪問到。

AngularJSSample.controller(['studentController', function ($scope) {
    $scope.students = [
        {name: 'John', age: 25, gender: 'boy'},
        {name: 'Joy', age: 15, gender: 'girl'},
        {name: 'Mary', age: 28, gender: 'girl'},
        {name: 'Sebastian', age: 10, gender: 'boy'},
        {name: 'Samantha', age: 16, gender: 'girl'}
    ];
}]);

自定義組件

自定義組件示例
創建 UserComponent 組件
export class UserComponent {
name = 'Semlinker';
address = {
province: '福建',
city: '廈門'
};
}
聲明 UserComponent 組件
declarations: [ AppComponent, UserComponent]@NgModule({
declarations: [ AppComponent, UserComponent]
})使用 UserComponent 組件 //<sl-user> 是自定義控件UserComponent的selector.
等於在另一個文件使用UserComponent
template: `
<sl-user></sl-user>
`
使用構造函數初始化數據 //組件當成類，對類進行操作
constructor() {
this.name = 'Semlinker';
this.address = {
province: '福建',
city: '廈門'
}
}

小結
AngularJS自己定義一整套完整的邏輯，其對前端代碼的規範性很有幫助，另外，內置的各種Directive會極大的減少開發人員的代碼量；未來AngularJS + Restful Service可能會大行其道。
對AngualarJS的槽點有2個，第一，所有邏輯知識都暴露在JavaScript中，是否會導致一些安全問題，第二，官方的文檔可用性極差啊。1

other : angularjs 安裝和基本語法 https://zhuanlan.zhihu.com/p/25430902