AngularJS 2.0入门权威指南

学习 Angular 2

当越来越多的 web app 使用 Angular 1构建的时候,更快更强大的 Angular 2 将会很快成为新的标准。

Angular的新约定使得它更容易去学习、更快的去开发 app。通过本教程学习更快速。更强大的 Angular 版本。

Angular 一个跨移动和桌面的框架

快速开始

本指南指导你如何构建一个简单 Angular app。

可以使用typescript/ JavaScript / Dart任意一种语言来编写Angular app,本教程采用JavaScript。

看它运行

运行实例是学习一个 Angular app 如何实现的最快的方式。

点击链接启动一个浏览器,会使用 plunker 来加载运行一个简单的示例。

文件的组织结构:

对我们来说,它只是一个index.html,style.css 和包含三个JavaScript文件的 app 文件夹组成的简单的 Web 目录。

当然,我们仅在 plunker只能构建简单的示例。我们关掉它开始一个真实的实践。

搭建我们的开发环境;

为我们的 app 编写 Angular 根组件;

添加 Angular 模块;

引导它去控制主页面;

编写主页面(即index.html);

添加 CSS 样式(style.css);

如果我们跟着指南的步骤一步步去实践,那么我们可以在 5 分钟内创建一个入门项目。

但是,大多数人总会陷入“why”和“how”中,花掉许多时间。

开发环境

我们需要一个地方去容纳你的项目文件,你的编辑。

创建新的文件夹:

mkdir angular-start
cd angular-start

添加需要的函数库

我们推荐使用 npm 包管理器来获得和管理我们的开发库。

不会使用 npm,点击链接开始学习,因为本教程是通过它来创建的。

添加 package.json 文件,直接 copy:

{
 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
 "start": "npm run lite",
 "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 命令安装这些包。

npm install

第一个 Angular 组件

组件是 Angular 中一个最基本的概念。一个组件管理一个视图(一块给用户展示信息、响应用户的页面)

技术上来讲,一个组件是一个控制某各视图模板的类。我们为搭建 Angular app 写许多代码。这是我们第一次尝试所以我们将会保持尽量的简单。

创建项目源文件夹

我们将我们的应用程序源代码放在一个根目录下的app/子文件夹下。mkdir app,cd app

添加一个组件文件

添加一个app.componet.js的文件并写入下面内容:

(function(app) {
 app.AppComponent =
 ng.core.Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
 })
 .Class({
  constructor: function() {}
 });
})(window.app || (window.app = {}));

我们通过链接一个组件和属于 Angular 全局明明区间类方法ng.core写入一个可视的 AppComponet 组件。

app.AppComponent =
 ng.core.Component({
 })
 .Class({
 });

这个组件方法用到一个含3个属性的对象。类方法使我们实现这个组件,给它赋予属性和方法就会绑定到视图,无论它的变现是否适合 UI。

模型

Angular 应用程序时模块化的。各个基友特定功能的模型链接在一起。

ES5 JS没有一个本地的模块系统。有许多流行的第三方类库系统我们可以使用。同样,为了简化和避免选择,Angular 为应用程序创建一个单独的全局命名区间。

我们在这个全局对象唤醒 app 且添加我们所有的代码构件。

我们不想去污染这个全局命名空间。所以在每个文件里我们把代码放入一个“IIFE”(Immediately Invoked Function Expression)。

(function(app){
})(window.app || (window.app={}));

我们通过这个全局的app命名空间对象传入 IIFE,如果他还不存在则使用一个空对象初始化它。

大多数的应用文件通过添加事物来输出东西到app命名空间。app.compont.js文件输出AppComponent。

app.AppComponent =

有一个比较复杂的应用程序会有子组件遗传自AppComponent在一个真是的树模型上。一个比较复杂的应用程序将有更多的文件和模块。

start示例并不复杂;一个组建时我们需要的。在这个小的应用程序里模块化扮演了基本组织的应用规则。

模块依赖于其它的模块。在JS Angular 应用程序里,当我们需要一些东西由其它模块提供,我们从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: '<h1>My First Angular App</h1>'
});

这个selector指定一个简单的CSS选择器给一个叫做my-app的HTML元素。Angular创建了并运行一个我们的AppComponent实例,无论如何它总是一个my-app元素作为HTML。

记住这个my-app选择器,我们需要这个知识点在我们写index.html的时候用到。
这个template属性保存组件的同伴模板。一个模板是一个HTML的形式,它告诉 Angular 怎样去渲染一个视图。我们的模板是一个单独HTML代码,“My First Angular App”。

现在,我们需要一些东西去告诉 Angular 去加载这组件。

添加一个 NgModule

Angular app 由 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,传入这个 root app module,AppModule。

学习为什么我们需要bootstrapModule从ng.platformBrowserDynamic并且为什么我们创建一个单独的JS文件。
我们已经请求 Angular 去连接这个 app 在一个浏览器用我们的组件在 root。Angular 将放在那儿?

添加index.html

Angular 运行我们的 app 在我们的index.html的一个指定位置。开始创建文件。

我们不能把我们的index.html放在app/文件夹下。我们将把它放在上一层,在项目的根文件夹下。

index.html文件内容如下:

<html>
 <head>
 <title>Angular QuickStart JS</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="styles.css">
 <!-- 1. Load libraries -->
 <!-- IE required polyfill -->
 <script src="node_modules/core-js/client/shim.min.js"></script>
 <script src="node_modules/zone.js/dist/zone.js"></script>
 <script src="node_modules/reflect-metadata/Reflect.js"></script>
 <script src="node_modules/rxjs/bundles/Rx.js"></script>
 <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
 <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
 <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
 <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
 <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
 <!-- 2. Load our 'modules' -->
 <script src='app/app.component.js'></script>
 <script src='app/app.module.js'></script>
 <script src='app/main.js'></script>
 </head>
 <!-- 3. Display the application -->
 <body>
 <my-app>Loading...</my-app>
 </body>
</html>

这儿有3个值的注意的地方:

我们加载我们需要的 JS 库;学习关于它们。

我们加载我们的 JS 文件。

我们添加<my-app>标签在<body>中。

当 Angular在main.js 请求bootstrapModule函数,它读取AppModule源信息,看见AppComponent是一个 启动组件,找到这个my-app选择器,定位到my-app的元素,然后加载我们的 app 视图在这些标签中。

添加一些样式

样式不是非常重要但是它们是非常好的,index.html假设我们有一个样式表叫style.css。

创建这个样式文件在根目录下并写入样式。也可以使用迷你版的样式文件。你可以参考下面的样式设置。

h1 {
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 250%;
}
body {
 margin: 2em;
}
 /*
 * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
 * for the full set of master styles used by the documentation samples
 */

运行它

打开命令工具,输入命令 npm start

这个命令运行一个静态的服务器 lite-server,它加载index.html在浏览器并且刷新浏览器当程序文件被修改。

很快,浏览器的标题栏会代开并显示内容。恭喜你,我们成功了。

做一些改变

尝试去改变信息的内容。

lite-server会一直监视,所以它会察觉改变,刷新浏览器,显示改变后的信息。

最后的项目结构

最后项目文件结构如下:

以上所述是小编给大家介绍的AngularJS 2.0入门权威指南,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • AngularJS入门教程之学习环境搭建

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ

  • AngularJS入门心得之directive和controller通信过程

    AngularJS 通过新的属性和表达式扩展了 HTML.Angularjs学习起来也非常的简单. 1.AngularJS是何方神圣 Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.这里AngularJS就应运而生

  • AngularJS入门教程(二):AngularJS模板

    是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: 复制代码 代码如下: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.你可以到GitHub去

  • AngularJs 60分钟入门基础教程

    AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,所有的操作都在这张页面上完成,由JavaScript来控制不同view在这个页面上的呈现.本文源于Youtube上一个不错的AngularJs的入门教程视频:AngularJS Fundamentals In 60-ish Minutes,主要讲解了

  • AngularJS快速入门

    怎么样快速了解AngularJS? 相信很多初学者都有过或者类似的疑问,其实这个问题没有标准的答案,每个人的技术背景.工作经验等等都不经相同,所以学习AngularJS的切入点肯定也就不同,我之前初略使用过knockoutjs,当我第一眼看到AngularJS的Helloworld案例后,顿时就被声明式的语法和强大的双向绑定特性所吸引. 其实AngularJS的官方网站首页的几个例子已经很好的展示了AngularJS的一些特性,下面我就从几个例子一步一步的讲解AngularJS吸引人的东西并且实

  • AngularJS入门知识之MVW类框架的编程思想探讨

    本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解MVW此类框架在流行的Web前端开发中的编程思想. 这个需求很常见,比如,一个两级菜单,在第一级别菜单项点击时候,对应的子菜单项目应该显示或隐藏. jQuery的实现: 复制代码 代码如下: <!-- html --> <ul class="parent">     <li class="parent_item">

  • Angular开发者指南之入门介绍

    什么是Angular AngularJS是动态Web应用程序的结构框架. 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程序的组件.AngularJS的数据绑定和依赖注入消除了许多你不得不编写的代码.这一切都发生在浏览器中,使其成为任何服务器技术的理想合作伙伴. 动态应用程序和静态文档之间的动态适配常常通过以下方式解决 一个库:一组在编写网络应用程序时非常有用的函数.你的代码是负责在它调用库中它认为合适的. 例如jQuery 框架:Web应用程序的特定实现,其

  • Angularjs 基础入门

    针对于这个其实我不太清楚应该针对于哪些人或者说不知道从哪开始写,所以这里我就按照一种简单的思路开始写 1.angular.element 2.angular.Bootstrap 我们非常清楚ng-app应用到节点,angular自动帮你初始化,初始化的过程分为如下几个步骤 1.angular会在document load的时候自动初始化,首先会找到ng-app这个指令指定的节点. 2.加载与module相关的指令 3.创建与应用相关的injector(依赖管理器) 4.以制定的ng-app为根节

  • AngularJS入门(用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

  • angularJS 入门基础

    angular 所有用到的库, 全部用的CDN: 复制代码 代码如下: <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>     <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>     <link h

随机推荐