AngularJS

javascript-mvc

Articles
Resources
Videos

Angular 1
Angular 2
Differences between version 1 and version 2
webpack

Salesforce Development
JWT
Using jQuery with Angular
Git

https://www.youtube.com/watch?v=Pp1XGOAvbYI - i18n

https://angular.io/docs/ts/latest/
QuickStart - done
Tutorial - done
Guide
Advance
Cookbook
API Reference

https://angular.io/docs/ts/latest/tutorial/toh-pt3.html - Teach us how to create separate components - done reading
https://angular.io/docs/ts/latest/tutorial/toh-pt4.html - Teach us how to create data services, dependency injection, and promises - done reading
https://angular.io/docs/ts/latest/tutorial/toh-pt5.html - Routing - done reading
https://angular.io/docs/ts/latest/tutorial/toh-pt6.html - HTTP service, observable - done reading

UI libraries

How can we install 3rd party library?

Simply install your library via npm install lib-name --save and import it in your code. If the library does not include typings, you can install them using npm:

npm install d3 --save
npm install @types/d3 --save-dev

If the library doesn't have typings available at @types/, you can still use it by manually adding typings for it:

// in src/typings.d.ts
declare module 'typeless-package';

// in src/app/app.component.ts
import * as typelessPackage from 'typeless-package';
typelessPackage.method();

How can we install a library into the global scope?

Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json. As an example, to use Boostrap 4 this is what you need to do:

npm install bootstrap@next

Then add the needed script files to apps[0].scripts:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally add the Bootstrap CSS to the apps[0].styles array:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

How can we upgrade Angular CLI to a newer version?

To update angular-cli to a new version, you must update both the global package and your project's local package. Global package:

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

Local project package:

rm -rf node_modules dist tmp
npm install --save-dev angular-cli@latest
ng init

Running ng init will check for changes in all the auto-generated files created by ng new and allow you to update yours. You are offered four choices for each changed file: y (overwrite), n (don't overwrite), d (show diff between your file and the updated file) and h (help). Carefully read the diffs for each code file, and either accept the changes or incorporate them manually after ng init finishes.

What are the steps in the quickstart guide?

  1. Install npm
  2. mkdir angular-quickstart
  3. cd angular-quickstart
  4. create the package.json file as mentioned on https://angular.io/docs/js/latest/quickstart.html
  5. npm install
  6. mkdir app (We like to keep our application code in a sub-folder off the root called app)
  7. cd app
  8. Add the component file named app.component.js as indicated on https://angular.io/docs/js/latest/quickstart.html
  9. Add an NgModule file named app/app.module.js as indicated on https://angular.io/docs/js/latest/quickstart.html
  10. Add a new file , main.js, to the app/ folder as indicated on https://angular.io/docs/js/latest/quickstart.html
  11. Add the index.html as indicated on https://angular.io/docs/js/latest/quickstart.html
  12. Create the style.css in the same folder as the index.html file.
  13. npm start

app/app.component.js

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

We're creating a visual component named AppComponent by chaining the Component and Class methods that belong to the global Angular core namespace, ng.core. The Component method takes a configuration object with three properties. The Class method is where we implement the component itself, giving it properties and methods that bind to the view and whatever behavior is appropriate for this part of the UI.

app/app/app.module.js:

(function(app) {
  app.AppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule ],
      declarations: [ app.AppComponent ],
      bootstrap: [ app.AppComponent ]
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

app/main.js:

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.AppModule);
  });
})(window.app || (window.app = {}));

We've asked Angular to launch the app in a browser with our component at the root.

index.html (above and outside of the app folder):

<html>
  <head>
    <title>Angular QuickStart JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>

    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/app.module.js'></script>
    <script src='app/main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

When Angular calls the bootstrapModule function in main.js, it reads the AppModule metadata, sees that AppComponent is the bootstrap component, finds the my-app selector, locates an element tag named my-app, and renders our application's view between those tags.

styles.css:

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

 /*
  * See 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
  */

What is the purpose of Angular Component?

The Component is the most fundamental of Angular concepts. A component manages a view - a piece of the web page where we display information to the user and respond to user feedback. Technically, a component is a class that controls a view template.

What is the purpose of the ng.core.Component() method?

ng.core.Component() tells Angular that this class definition object is an Angular component. The configuration object passed to the ng.core.Component() method has two fields, a selector and a template.

ng.core.Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})

What is the purpose of the 'selector' attribute specified with ng.core.Component()?

The selector specifies a simple CSS selector for a host HTML element named my-app. Angular creates and displays an instance of our AppComponent wherever it encounters a my-app element in the host HTML.

ng.core.Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})

What is the purpose of the template attribute specified with ng.core.Component()?

The template property holds the component's companion template. A template is a form of HTML that tells Angular how to render a view. Our template is a single line of HTML announcing "My First Angular App".

ng.core.Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})

What is an NgModule?

Angular apps are composed of Angular Modules that snuggly contain all our components and everything else we need for our app.

What does the 'npm start' command do?

It runs a static server called lite-server that loads index.html in a browser and refreshes the browser when application files change.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License