Angularjs 2: My Journey

Well, started my course on Angular2 yesterday. So, I was thinking I would share my experience and thoughts about learning the latest Google technology as I go along.

Angularjs 2: February 23, 2017

Today I learned that, Angularjs2 is not Angularjs 1. They are completely different animals. If Angularjs1 is a walrus, then Angularjs2 is a Sea Lion. They’re kinda the same, but not really.

That’s not necessarily a bad thing! I mean, I was able to get up and running with my first Hello World application within 10 minutes — it really couldn’t be faster! Simply install the Angularjs 2 package from the CLI using npm (node’s package manager). Create a project, and ask it to serve… and you’re viewing “Your App” @ localhost:4200 tout suite!.

Install Angular2 via NPM

$ npm install -g @angular/cli
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng serve

Additionally, I learned that (as with its predecessor), there is the main component, or “root component” entitled, ‘app-root’. And, that alot of what I will be building is components. So what are components? Well they consist of a .css file (optional), an .html (optional), a .ts (typescript file) (or two if you’re testing).

How to Create an Angular2 Component via NPM

$ ng generate userinfo

This generates four files (there are other commands to omit files):

  • userinfo.component.css (optional)
  • userinfo.component.html (optional)
  • userinfo.component.spec.ts (testing, optional)
  • userinfo.component.ts (required)

When i opened up the userinfo.component.ts file – the typescript file. I could clearly see an import statement at the top which seemingly imported the “Component” library from the angular/core. I imagine I could add additional libraries to import from angular/core or perhaps from external libraries.

The next section included an @Component({}) section with a number of parameters which reminded me of the Angularjs 1.5 versions of a directive. Mainly, the setting a selector part.

The selector can be set with a # – (just like in Angular 1.X), which makes this a div component so it would be called like

. Optionally, the component can be rendered by setting its call like this :

.

The templateUrl: would allow me to include an external html, but I can optionally write inline html instead by changing this parameter to ‘template’. Same goes for the style, include as external file as generated above, or use inline. The general rule for using inline html and css though, is if your component is small enough. So mostly, you’ll utilize the css and html generated files. If you don’t need them, you can simply delete them. The only required file — is the .ts file

Angularjs 2: February 3, 2017

So its been a few since my last post on this subject, and I’ve skipped ahead. So today, I’ll share some of the “oh yea” moments.

Constructor versus ngOnInit

Angularjs2 provides hooks to various points in the app’s lifecycle. But recently, I had this question: What is the difference between the constructor() and ngOnInit() ?. Here’s what I found out…

The constructor is called regardless of whether you include the constructor. The constructor is called before the ngOnInit. And the constructor is used to initialize parameters and variables. The ngOnInit is where you would put code that needs to make sure component’s initializations have taken place. The ngOnInit happens right after the constructor is called. So put your code in ngOnInit when the component has built.

// Annotation section
@Component({
  selector: 'my-app',
  template: `

Hello {{ name }}


          
`
})
// 
class MyApp {

  // Constructor call is optional... if I don't 
  // include the constructor, it will be called by default.  
  // Every Class has a constructor by default.
  // Instantiate any code you need to initialize in your component.

  constructor() {
    this.name = 'Valerie';
  }


 setChildComponent(info) {
    this.ChildComponent = info;
  }

  // ngOnInit is auto generated in the file when you create your component.
  // Initialize any child components here.
  ngOnInit(){
      setChildComponent(info);

}
}

Ingredients

    Ingredients

      Ingredients