Angular4 preparation for study notes and environment construction project, angular4 Study Notes

Angular4 preparation for study notes and environment construction project, angular4 Study Notes

Nonsense 1 written in front

I still use angular for 1.x, which is a rare age in which code is written against humanity, but angular2 has not yet come out. I am an engineer who switched from j2ee to Android. That is to say, my daily development language is Java. Suddenly switching to JavaScript is really uncomfortable, like a polar bear talking to a penguin, not to mention that webstorm was too slow to use sublime without prompt (well, finally, we have cured the chronic disease for many years and never remembered the function name syndrome "). After a painful wall collision experience, I finally got used to it.

But I still want to yell at criptwcnm.

Let's talk about things.

Currently, the main front-end framework is React. Angular is behind Google, but it is still a little worse. I have used both of them. Let's talk about the characteristics of Angular that I feel and the difference between Angular and React.

It is unfair to directly compare Angular with React. Angular is an all-in-one bucket. React is only the V in MVC. It often needs to be used with something like redux (react + redux + router )..

Second, Angular is characterized by binding. From the perspective of code writing, it is more in line with the MVC concept. The component in 4.0 is equivalent to the combination of C and V. The template or templateUrl is the view, and the class is the so-called controller. You can declare a unique Model in the Controller and use it in the corresponding View to achieve decoupling. Angular also supports service injection to further separate the business logic.

React is actually a virtual dom, which is a matter of Speed-up. Redux is logic-related. It is decoupled by the unique state. I will change the value for changing the state. The two have similar ideas. I personally think the Reducer in Redux is the service in Angular.

Third, which is better? Personally, I still like React more. Of course, this subjective factor occupies a large level. When I wrote Angular, I was an Android programmer who complained about it. When I wrote React, I was a front-end developer.

Nonsense written in front 2

Some preparations are required.

Node, the foundation of everything.

Sublime. This is my personal ide. I have used webstorm before, but it is a little slow to register. However, the minor disadvantage of using sublime is that you need to use the plug-in. webstorm does have all the functions .... Subime's support for React is quite good, but its support for Angular is still a bit pitfall. Of course, it may be that my plug-in is not installed correctly.

Git. This project has been submitted to github. Of course, the update level is inversely proportional to my laziness level. In fact, I have already completed this project, but because of some mysterious force from the east, I just deleted it again...

Good English, not required. However, if you are good at English, you can directly go to angular's official website and transfer the portal. If you go over the wall, the speed will be faster. Angular's Chinese version remains at 2.0, with the write method slightly different from 4.0.

Of course, there is no difference between 4.0 and 2.0, at least much smaller than the gap between 2.0 and 1.x)

After talking nonsense, I think I only need to commit a second.

Let's talk about the demand first-any project that has no need is a joke! Stream! Success!

The requirement is very simple, and it is basically imitating the full backup page of the Super robot war (Yes, I am a fan of steel bullet and I am just playing machine war Z recently ).

First, this project contains three pages:

1 Homepage

 

The upper half shows the project description, and the lower half selects three bodies for simple description.

2. Body list page

Body display: displays all the bodies, including names and statuses. (To prevent image infringement, I use up-to-speed models I made myself ).

3. Body details page

You can click any body on the home page and details page to jump to this page. This page describes the parameters, basic information, and status of the body.

Environment Construction

First, you must have node and sublime, and then use the sublime package manager to install the plug-in typescript.

For more information about how to install the node and sublime Package Manager and download the plug-in, see the method in the previous article.

Second, you can use sourceTree or the command line to clone the address:

1) official quickstart provided by angular

https://github.com/angular/quickstart.git

2) the advantage of my adapted version is that it integrates webpack and scss. The disadvantage is that the writing is messy and I don't know what the problem is.

https://github.com/stormrabbit/gundam-meister.git

Third, install various dependencies in npm install.

If the installation fails, use cnpm

Cnpm:

npm install -g cnpm --registry=http://r.cnpmjs.orgnpm install microtime --registry=http://r.cnpmjs.org --disturl=http://dist.cnpmjs.org

Pretend to install

Run npm start

Directory structure:

You do not need to modify the entry file of the src/main. ts project.

The src/index.html project displays the html, container, which is equivalent to a java Virtual Machine. labels are customized component labels.

The src/app. module. ts project configuration file, the component used, the registered service, and the subsequent routing will be registered here. It is equivalent to the mainfist. xml file of Android.

The first container of the src/app/component/appcomponent/app. component. ts project is also the official entrance of the project. It is equivalent to the main function in java and the MainActivity in Android. Of course, it is not necessarily a name, but a convention. Template is an html page, which is equivalent to view and class is equivalent to controller.

Access http: // localhost: 3000/. The page is displayed.

After the environment is set up, hello, world.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.