Scratching Project

•  There are 2 ways to start off with a application in angular
• Create workspace with application directly with following command
• ng new messenger
• messenger is the name of the project
• create an empty workspace and add multiple applications to it using following commands
• ng new messenger --createApplication=false
• ng generate application messenger
• In this case the application will be generated in projects folder in current directory.
• We can also generate multiple applications like this which will share common workspace.
• All local installed dependencies are stored in package.json
• In a multiple application structure these are shared by applications.
• When publishing a project to a repository or retrieving it or migrating it we do not get or copy dependencies under node_modules folder along, we get this file.
• Use npm install to install these dependencies at new location.
• Some dependencies like typescript controller and http-server need to be installed globally with a parameter -g as follows
• The command npm start executes the start script in package.json.
• mostly it is the compilation command(tsc) and server running command(ng serve) or each of them individually.
• By default we can start the application using ng-serve we can also use live-server but it needs to be installed as a separate global dependency.
• We only need this if npm start only compiles and does not start the server.
• In Angular2 everything is a component so application is a tree of components
• At the root we have a root component and every other component is a part of root component
• This root component is the first one to be created which acts as a bootstrap for the application.
• Next we describe view for a component
• This view can be written inline on template property in @component annotation.
• This view can also be defined under @view annotation as Html.
• This method has been deprecated and decommissioned now.
• This view can also be in a template file which is referred in template url property under @component annotation.
• In the main.ts we have bootstrapped our root component.
• Now to ensure that component is available here we have also added a bootstrap in component module file.
• Bootstrapping a component from its module makes it available in application where it can be passed to application libraries.
• Next for our root module which can be called using selector "app-root" we have defined the corresponding tags in index.html.
• It's always better to have a separate folder for each component.
• We have defined our root component in app folder

Pull Code:

https://github.com/gauravmatta/angular/tree/Adding-a-root-component

Creating the main method

1. In the main file we first include the libraries needed to configure the environment.
2. Next we import the platformBrowserDynamicModule which is used to bootstrap the application.
3. We are also importing the AppModule which is our Root Module
4. We are then Bootstrapping our app module.

Organize folders using a component centric perspective

• All the components are organized in the folders of their names
• These files include
• Component files
• Routing files
• Html files
• Module files

Pull Code:

https://github.com/gauravmatta/angular/tree/create_base_component/