AngularJS 2.0 Getting Started Guide

AngularJS 2.0

Learning Angular 2

When more and more web apps are built using Angular 1, the faster and more powerful Angular 2 will quickly become the new standard.

Angular's new convention makes it easier to learn and to develop apps faster. Learn faster with this tutorial. A more powerful version of Angular.

Angular A framework that spans both mobile and desktop

Quick Start

This guide guides you through how to build a simple Angular app.

You can use Typescript/javascript/dart to write the angular app in any language, this tutorial uses JavaScript.

Watch it run

Running an instance is the quickest way to learn how a Angular app can be implemented.

Click the link to launch a browser that uses Plunker to load and run a simple example.

Organizational structure of the file:

For us, it's just a index.html style.css JavaScript simple Web directory consisting of an app folder that contains three files.

Of course, we can only build simple examples in Plunker. We turn it off and start a real practice.

1. To build our development environment;
2. Write the Angular root component for our app;
3. Add Angular module;
4. Guide it to control the main page;
5. Write the main page (ie index.html);
6. Add CSS style (STYLE.CSS);

If we follow the step-by-step steps of the guide, we can create a starter project within 5 minutes.

However, most people will fall into "why" and "how", spending a lot of time.

Development environment

We need a place to accommodate your project files and your edits.

• To create a new folder:

mkdir angular-start
cd angular-start

• Add the required library of functions

We recommend using the NPM Package Manager to get and manage our development library.

Do not use NPM, click on the link to start learning, because this tutorial is created by it.

• Add Package.json file, direct 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"  }}

• Install these packages with the NPM command.

npm install

First Angular component

Components are one of the most basic concepts in Angular. A component manages a view (a page that shows the user information and responds to the user)

Technically, a component is a class that controls a particular view template. We write a lot of code to build the Angular app. This is the first time we have tried so we will keep it as simple as possible.

• Create a Project source folder

We put our application source code under a sub-folder under a root directory app/ . mkdir app,cd app

• Add a component file

Add a app.componet.js file and write the following:

(function(app) {  app.AppComponent =    ng.core.Component({      selector: ‘my-app‘,      template: ‘)    .Class({      constructor: function() {}    });})(window.app || (window.app = {}));

We write a visual appcomponet component by linking a component and belonging to the Angular global clear interval class method ng.core .

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

This component method uses an object with 3 attributes. The class method enables us to implement this component, giving it properties and methods that bind to the view, regardless of whether its monetization is appropriate for the UI.

• Model

The Angular application is modular. The models of each base friend-specific feature are linked together.

ES5 JS does not have a local module system. There are many popular third-party class library systems that we can use. Similarly, to simplify and avoid selection, Angular creates a separate global naming range for the application.

We wake the app in this global object and add all of our code artifacts.

We don't want to pollute this global namespace. So in each file we put the code in a "Iife" (Immediately invoked Function Expression).

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

We pass through this global app namespace object to Iife, and if he does not already exist, initialize it with an empty object.

Most application files output things to namespaces by adding things app . app.compont.jsfile Output AppComponent .

app.AppComponent =

There is a more complex application that will have subcomponents inherited from AppComponent a really tree model. A more complex application will have more files and modules.

The start example is not complicated; we need it when we build it. In this small application, modularity plays a fundamental role in the application of the Organization's rules.

Modules are dependent on other modules. In the JS Angular application, when we need something to be provided by other modules, we app get it from the object. When other modules need to be involved AppComponent , it needs to be app.AppComponent obtained from:

declarations[ app.AppComponent ],

The Angular is also modular. It is a collection of module libraries. Each module library is made up of several associated modules.

When we need something Angular, we use the ng object.

• Classes that define objects

.class({    constructor: function(){}});

This class is empty, and the class initializes the AppComponent object for the class. When we are ready to build an actual project, we can use properties and methods to expand the object. Our AppComponent class is empty, but there is an empty constructor, because we do not need to do anything in the start Project.

• Component Definition Objects

ng.core.Component()Tell Angular that this class initializes the object to a Angular component. This configuration object is passed to ng.core.Component() a method that has two fields, selector and a template .

ng.core.Component({    selector: ‘my-app‘,    template: ‘});

This selector specifies a simple CSS selector for a named my-app HTML element. Angular creates and runs an instance of us AppComponent , anyway it's always an my-app element as HTML.

Remembering this my-app selector, we need this knowledge point index.html to be used when we write.

This template property holds the companion template for the component. A template is a form of HTML that tells Angular how to render a view. Our template is a separate HTML code, "My first Angular App".

Now, we need something to tell Angular to load this component.

• Add a Ngmodule

The Angular app is made up of Angular modules that are dependent on our components and all of our app needs.

Create a app/app/module.js file like this:

(function(app) {app). Appmodule = Ng.core.NgModule({imports: [Ng.platformBrowser.BrowserModule], declarations: [App. AppComponent], Bootstrap: [App. AppComponent] }) . Class({constructor:function() {} });})(window.app | | (window.app = {}));

• Launch app

Add a new file, app/main.js like the following:

(function(app) {  document.addEventListener(‘DOMContentLoaded‘, function() {    ng.platformBrowserDynamic      .platformBrowserDynamic()      .bootstrapModule(app.AppModule);  });})(window.app || (window.app = {}));

We need two things to run this app:

Functions of the Angular platformBrowserDynamic().bootstrapModule

This app we just wrote the initial module;

We need them all to be in our namespace. We then request bootstrapModule that the root app module be passed in AppModule .

Learn why we need to bootstrapModule start ng.platformBrowserDynamic with and why we create a separate JS file.

We have requested Angular to connect this app in a browser with our components in root. Where is Angular going to put it?

• Add toindex.html

Angular run our app in one of our index.html designated locations. Start creating the file.

We can't put our index.html in the app/ folder. We'll put it on the top level, under the project's root folder.

index.htmlThe contents of the file are as follows:

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

Here are 3 values to note:

We load the JS libraries we need and learn about them.

We loaded our JS file.

We add <my-app> tags in the <body> .

When angular is in the main.js request bootstrapModule function, it reads the AppModule source information, sees that it AppComponent is a boot component, finds the my-app selector, navigates to my-app the element, and then loads our app view in these tags.

• Add some styles

Styles are not very important but they are very good, index.html suppose we have a style sheet called style.css .

Create this style file in the root directory and write the style. You can also use the mini version of the style file. You can refer to the following styling settings.

H1 {  color: #369;   font-family: Arial, Helvetica, Sans-serif;  font-size: %; }Body {  margin: 2em;}  / * * See HTTPS://GITHUB.COM/ANGULAR/ANGULAR.IO/BLOB/MASTER/PUBLIC/DOCS/_EXAMPLES/STYLES.CSS * For the full set of M Aster styles used by the documentation samples * /

• Run it

Open command tool, enter commandnpm start

This command runs a static server lite-server , it loads index.html in the browser and refreshes the browser when the program files are modified.

Soon, the browser's title bar will open and display the content. Congratulations, we have succeeded.

• Make some changes.

Try to change the content of the message.

lite-serverwill always be monitored, so it will detect changes, refresh the browser, and display the changed information.

• The final project structure

The final project file structure is as follows:

Original link: https://angular.io/docs/js/latest/quickstart.html

AngularJS 2.0 Getting Started Guide