Angular2 Learning Note (1)：Basic project component

There are many popular framework can build a web application

When we build a angular project through angular-cli, a following template is generated. A new component is add by $ng generate component start and generate src/app/start folder.

src/index.html

    Assign <app-root> as initial directive (root component, which defined in src/app/app.component.ts)

src/main.ts

    Set AppModule as initialization module. AppModule and its dependency is managed under src/app/app.module.ts

src/app/app.component.ts

    All module related with our application will be managed here. Including the start component we add manually. Last line: export this as AppModule so this can be referred as initialization module.

    In @NgModule{

    Declare: all component related with View is declared here

    Import: Other components

    Providers: the service we can provide and register here

    Bootstrap: the root component

}

src/app/app.component.ts

    Define the app component here. Including the view (app.component.html) and style (app.component.css). If we have any variable or function, declare in the class AppComponent{}. We declare a title variable here and we can see in app.component.html. Check src/app/start/start.component.ts and see a similar structure.

src/app.app.component.html

    The view of our application. We use the title in <h1>

Here roadmap:

When you use $npm XXX, you actually using the npm script. The usage are defined under package.json. Npm script contains several abbreviations, for example, $npm start = $npm run start. If we meet something ambiguous, check http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

   

npm 的使用方法
    https://segmentfault.com/a/1190000012099112
$npm install [component name]
     --save: 在json檔中加入dependency
$npm generate component [component name] = $npm g c [component name]
$npm generate service [service name] = $npm g s [service name]


Reference:
[1] 乃哥
http://webnas.bhes.ntpc.edu.tw/wordpress/wp-content/uploads/2017/05/Angular-2-%E9%96%8B%E7%99%BC%E5%AF%A6%E6%88%B0_%E6%96%B0%E6%89%8B%E5%85%A5%E9%96%80%E7%AF%87-%E9%81%A9%E7%94%A8-Angular-2.0.0-final-%E7%89%88%E6%9C%AC-.pdf