AngularJS20入门指南

AngularJS2.0入门指南AngularJS2.0学习Angular2当越来越多的webapp使用Angular1构建的时候，更快更强大的Angular2将会很快成为新的标准。Angular的新约定使得它更容易去学习、更快的去开发app。通过本教程学习更快速。更强大的Angular版本。Angular一个跨移动和桌面的框架快速开始本指南指导你如何构建一个简单Angularapp。可以使用typescript/JavaScript/Dart任意一种语言来编写Angularapp，本教程采用JavaScript。看它运行运行实例是学习一个Angularapp如何实现的最快的方式。点击链接启动一个浏览器，会使用plunker来加载运行一个简单的示例。文件的组织结构：对我们来说，它只是一个index.html，style.css和包含三个JavaScript文件的app文件夹组成的简单的Web目录。当然，我们仅在plunker只能构建简单的示例。我们关掉它开始一个真实的实践。1.搭建我们的开发环境；2.为我们的app编写Angular根组件；3.添加Angular模块；4.引导它去控制主页面；5.编写主页面(即index.html)；6.添加CSS样式(style.css)；如果我们跟着指南的步骤一步步去实践，那么我们可以在5分钟内创建一个入门项目。但是，大多数人总会陷入“why”和“how”中，花掉许多时间。开发环境我们需要一个地方去容纳你的项目文件，你的编辑。创建新的文件夹：mkdirangular-startcdangular-start添加需要的函数库我们推荐使用npm包管理器来获得和管理我们的开发库。不会使用npm，点击链接开始学习，因为本教程是通过它来创建的。添加package.json文件，直接copy：{name:angular2-quickstart,version:1.0.0,scripts:{start:npmrunlite,lite:lite-server},license:ISC,dependencies:{@angular/common:2.0.0,@angular/compiler:2.0.0,@angular/core:2.0.0,@angular/forms:2.0.0,@angular/http:2.0.0,@angular/platform-browser:2.0.0,@angular/platform-browser-dynamic:2.0.0,@angular/router:3.0.0,@angular/upgrade:2.0.0,core-js:^2.4.1,reflect-metadata:^0.1.3,rxjs:5.0.0-beta.12,zone.js:^0.6.23,angular2-in-memory-web-api:0.0.20,bootstrap:^3.3.6},devDependencies:{concurrently:^2.0.0,lite-server:^2.2.0}}通过npm命令安装这些包。npminstall第一个Angular组件组件是Angular中一个最基本的概念。一个组件管理一个视图(一块给用户展示信息、响应用户的页面)技术上来讲，一个组件是一个控制某各视图模板的类。我们为搭建Angularapp写许多代码。这是我们第一次尝试所以我们将会保持尽量的简单。创建项目源文件夹我们将我们的应用程序源代码放在一个根目录下的app/子文件夹下。mkdirapp，cdapp添加一个组件文件添加一个app.componet.js的文件并写入下面内容：(function(app){app.AppComponent=ng.core.Component({selector:'my-app',template:'h1MyFirstAngularApp/h1'}).Class({constructor:function(){}});})(window.app||(window.app={}));我们通过链接一个组件和属于Angular全局明明区间类方法ng.core写入一个可视的AppComponet组件。app.AppComponent=ng.core.Component({}).Class({});这个组件方法用到一个含3个属性的对象。类方法使我们实现这个组件，给它赋予属性和方法就会绑定到视图，无论它的变现是否适合UI。模型Angular应用程序时模块化的。各个基友特定功能的模型链接在一起。ES5JS没有一个本地的模块系统。有许多流行的第三方类库系统我们可以使用。同样，为了简化和避免选择，Angular为应用程序创建一个单独的全局命名区间。我们在这个全局对象唤醒app且添加我们所有的代码构件。我们不想去污染这个全局命名空间。所以在每个文件里我们把代码放入一个“IIFE”（ImmediatelyInvokedFunctionExpression）。(function(app){})(window.app||(window.app={}));我们通过这个全局的app命名空间对象传入IIFE，如果他还不存在则使用一个空对象初始化它。大多数的应用文件通过添加事物来输出东西到app命名空间。app.compont.js文件输出AppComponent。app.AppComponent=有一个比较复杂的应用程序会有子组件遗传自AppComponent在一个真是的树模型上。一个比较复杂的应用程序将有更多的文件和模块。start示例并不复杂；一个组建时我们需要的。在这个小的应用程序里模块化扮演了基本组织的应用规则。模块依赖于其它的模块。在JSAngular应用程序里，当我们需要一些东西由其它模块提供，我们从app对象得到它。当其它模块需要涉及AppComponent，它需要从app.AppComponent获取：declarations:[app.AppComponent],Angular也是模块化的。它是一个模块库的集合。每一个模块库都是由几个有关联的模块组成的。当我们需要Angular的一些东西，我们使用ng对象。定义对象的类.class({constructor:function(){}});这个类中是空的，这个类为AppComponent类初始化对象。当我们准备构建一个实际的项目，我们能用属性和方法拓充这个对象。我们的AppComponent类是空的，但是有一个空的constructor，因为我们不需要在start项目里做任何事。组件定义对象ng.core.Component()告诉Angular这个类初始化对象为一个Angular组件。这个配置对象传递给ng.core.Component()方法有两个字段，selector和template。ng.core.Component({selector:'my-app',template:'h1MyFirstAngularApp/h1'});这个selector指定一个简单的CSS选择器给一个叫做my-app的HTML元素。Angular创建了并运行一个我们的AppComponent实例，无论如何它总是一个my-app元素作为HTML。记住这个my-app选择器，我们需要这个知识点在我们写index.html的时候用到。这个template属性保存组件的同伴模板。一个模板是一个HTML的形式，它告诉Angular怎样去渲染一个视图。我们的模板是一个单独HTML代码，“MyFirstAngularApp”。现在，我们需要一些东西去告诉Angular去加载这组件。添加一个NgModuleAngularapp由Angular模块组成，这些模块依赖包含我们的组件和所有我们的app需要的。创建一个app/app/module.js文件像下面这样：(function(app){app.AppModule=ng.core.NgModule({imports:[ng.platformBrowser.BrowserModule],declarations:[app.AppComponent],bootstrap:[app.AppComponent]}).Class({constructor:function(){}});})(window.app||(window.app={}));启动app添加一个新文件，app/main.js，像下面：(function(app){document.addEventListener('DOMContentLoaded',function(){ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.AppModule);});})(window.app||(window.app={}));我们需要两个东西去运行这个app：Angular的platformBrowserDynamic().bootstrapModule函数这个app我们刚写的初始模块；我们需要它们都要在我们的命名空间。然后我们请求bootstrapModule，传入这个rootappmodule，AppModule。学习为什么我们需要bootstrapModule从ng.platformBrowserDynamic并且为什么我们创建一个单独的JS文件。我们已经请求Angular去连接这个app在一个浏览器用我们的组件在root。Angular将放在那儿？添加index.htmlAngular运行我们的app在我们的index.html的一个指定位置。开始创建文件。我们不能把我们的index.html放在app/文件夹下。我们将把它放在上一层，在项目的根文件夹下。index.html文件内容如下：htmlheadtitleAngularQuickStartJS/titlemetaname=viewportcontent=width=device-width,initial-scale=1linkrel=stylesheethref=styles.css!--1.Loadlibraries--!--IErequiredpolyfill--scriptsrc=node_modules/core-js/client/shim.min.js/scriptscriptsrc=node_modules/zone.js/dist/zone.js/scriptscriptsrc=node_modules/reflect-metadata/Reflect.js/scriptscriptsrc=node_modules/rxjs/bundles/Rx.js/scriptscriptsrc=node_modules/@angular/core/bundles/core.umd.js/scriptscriptsrc=node_modules/@angular/common/bundles/common.umd.js/scriptscriptsrc=node_modules/@angular/compiler/bundles/compiler.umd.js/scriptscriptsrc=node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/scriptscriptsrc=node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js/script!--2.Loadour'modules'--scriptsrc='app/app.comp