ANGULARJS 2.0 Introductory Authority guide _ANGULARJS

Learning Angular 2

Faster and more powerful angular 2 will soon be the new standard as more and more web apps are built using angular 1.

Angular's new engagement makes it easier to learn and develop apps faster. Learn more quickly through this tutorial. More powerful version of angular.

Angular a frame across the mobile and desktop

Quick Start

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

You can write the angular app using any of Typescript/javascript/dart languages, and this tutorial uses JavaScript.

Watch it run

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

Click on the link to start a browser and use Plunker to load a simple example.

The organizational structure of the file:

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

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

Build our development environment;

Write the angular root component for our app;

Add angular module;

Guide it to control the main page surface;

Write the main page (ie index.html);

Add CSS style (STYLE.CSS);

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

However, most people always fall into the "why" and "how" and spend a lot of time.

Development environment

We need a place to accommodate your project files to your editor.

To create a new folder:

mkdir angular-start 
CD Angular-start

To add a function library that you need

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 through 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 through the NPM command.

NPM Install

First angular component

Component is one of the most basic concepts in angular. A component manages a view (a page that shows the user the information, responds to the user)

Technically, a component is a class that controls a view template. We write a lot of code to build 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 app/subfolder under a root directory. 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: '  
 

We write a visual appcomponet component by linking a component and the angular global clear interval class method Ng.core.

App. Appcomponent =
 ng.core.Component ({
 })
 . Class ({
 });

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

Model

Modular when angular an application. The models for each base-friend-specific feature are linked together.

ES5 JS does not have a local modular 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 up the app in this global object and add all of our code artifacts.

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

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

We pass this global app namespace object to Iife, and if he doesn't exist, initialize it with an empty object.

Most application files are added to the app namespace by adding things. App.compont.js file Output appcomponent.

App. Appcomponent =

There is a more complex application that has subcomponents inherited from Appcomponent on a true tree model. A more complex application will have more files and modules.

The start example is not complex; what we need when we build. Modularity in this small application is the rule of application of the basic organization.

The module relies on other modules. In the JS angular application, when we need something that is provided by other modules, we get it from the App object. When other modules need to involve appcomponent, it needs to be from app. Appcomponent Get:

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 to angular something, we use the Ng object.

Defining the class of an object

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

This class is empty, and this class initializes the object for the Appcomponent class. When we are ready to build a real project, we can use attributes and methods to expand the object. Our Appcomponent class is empty, but there is an empty constructor, because we don't need to do anything in the start Project.

Component Definition Object

Ng.core.Component () tells Angular that this class initializes the object as a angular component. This configuration object is passed to the Ng.core.Component () method with two fields, selector and template.

Ng.core.Component ({
 selector: ' My-app ',
 Template: '  
 

This selector specifies a simple CSS selector for an HTML element called My-app. Angular created and ran one of our appcomponent instances, anyway it was always a MY-APP element as HTML.

Remember this My-app selector, we need this knowledge point when we write index.html.
This template property saves 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 I-angular App".

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

Add a Ngmodule

The angular app consists of angular modules that are dependent on our components and all of our app needs.

Create a App/app/module.js file as follows:

(function (APP) {
 app. Appmodule =
 Ng.core.NgModule ({
  imports: [Ng.platformBrowser.BrowserModule],
  declarations: [App. Appcomponent],
  bootstrap: [App. Appcomponent]
 })
 . Class ({
  constructor:function () {}
 });
}) (Window.app | | (Window.app = {}));

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

Angular platformbrowserdynamic (). Bootstrapmodule function

This app we just wrote the initial module;

We need both of them to be in our namespace. We then asked Bootstrapmodule to pass in the root app Module,appmodule.

Learn why we need bootstrapmodule from ng.platformbrowserdynamic and why we create a separate JS file.
We have requested angular to connect this app in a browser using our component in root. Where's angular going to be?

Add index.html

Angular runs our app at a designated location in our index.html. Start creating the file.

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

The contents of the index.html file are as follows:

Here are 3 values of the attention places:

We load the JS library we need; learn about them.

We load our JS file.

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

When angular requests the bootstrapmodule function in Main.js, it reads Appmodule source information, sees that appcomponent is a boot component, finds this My-app selector, navigates to the My-app element, and then loads our The app view is in these tags.

Add some styles

Styles are not very important but they are very good, index.html suppose we have a stylesheet 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 style settings.

H1 {
 color: #369;
 Font-family:arial, Helvetica, Sans-serif;
 font-size:250%;
}
body {
 margin:2em;
}
 *
 * 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
 * *

Run it

Open command tool, enter command NPM start

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

Soon, the title bar of the browser opens and displays the content. Congratulations, we've succeeded.

Make some changes.

Try to change the content of the message.

Lite-server will always monitor, so it will detect changes, refresh the browser, and display the changed information.

The final project structure

The final project document structure is as follows:

The above is a small set to introduce the ANGULARJS 2.0 guide to the authority, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!