Angular Quick Start

https://angular.io/docs/js/latest/quickstart.html

1 Development Environment

Make a new directory and place in it a package.json file containing all the dependencies and scripts we need to run a nice app. They provide one such recommended example.

2 Our First Component

A View is a piece of a webpage where we display info to the user and respond to user feedback.

A Component manages a view.

In more technical terms, a Component is a Class that controls a View Template.

2.1 Create App source subfolder

From the root we’d like a folder called src/app

mkdir src
cd src
mkdir app
cd app

2.2 Add component file

Create file app.component.js

(function(app){
    // AppComponent is a visual component created by chaining
    // Component and Class methods that belong to the 
    // ng.core namespace
    app.AppComponent = 
        // Component method takes configuration object with three properties
        ng.core.Component({
            selector: 'my-app',
            template: '<h1>Hello Angular</h1>'
        })
        // Class method implements component, giving it properties/methods
        // that bind to the view and whatever behavior is appropriate for this
        // part of UI
        .Class({
            constructor: function(){

            }
        });
})(window.app || (window.app = {}));

2.3 Modules

Angular apps use modules. A module is a single file dedicated to some purpose. In this case, we’ll have a single module: app. We’ll put everything in it.

// the top part of the iife, where we're passing in the `app` module
(function(app){
    // AppComponent is a visual component created by chaining
    // Component and Class methods that belong to the ng.core namespace.
    //
    // app files usually `export` one thing to the global namespace. 
    // in this case, it's exporting app.AppComponent
    app.AppComponent = 
        // Component method takes configuration object with three properties
        ng.core.Component({
            selector: 'my-app',
            template: '<h1>Hello Angular</h1>'
        })
        // Class method implements component, giving it properties/methods
        // that bind to the view and whatever behavior is appropriate for this
        // part of UI
        .Class({
            constructor: function(){

            }
        });
// the bottom part of the iife, which initializes `app` 
// if it doesn't exist already
})(window.app || (window.app = {}));

If we need to get something from another module, we get it from the app object, where all the modules export things. If a module needs to refer to the AppComponent, it does so through the app.AppComponent. Angular is also modular, so when we need to get something from Angular, we use the ng object, as you can see above where it refers to ng.core.

Here’s our final notes. READ THEM AGAIN!!!

// the top part of the iife, where we're passing in the `app` module
(function(app){
    // AppComponent is a visual component created by chaining
    // Component and Class methods that belong to the ng.core namespace.
    //
    // app files usually `export` one thing to the global namespace. 
    // in this case, it's exporting app.AppComponent
    app.AppComponent = 
        // Component method takes configuration object with three properties
        //
        // `ng` refers to Angular, where we'd get a built-in module
        // `ng.core.Component tells Angular that this class definition object 
        // is an Angular component. 
        ng.core.Component({
            // CSS selector for HTML host element
            selector: 'my-app',
            // the component's companion template telling
            // telling Angular how to render a view. 
            template: '<h1>Hello Angular</h1>'
        })
        // Class method implements component, giving it properties/methods
        // that bind to the view and whatever behavior is appropriate for this
        // part of UI
        .Class({
            constructor: function(){

            }
        });
// the bottom part of the iife, which initializes `app` 
// if it doesn't exist already
})(window.app || (window.app = {}));

2.4 Add an NgModule

Apps are made up of Modules that contain Components and other stuff we need.

Create app.module.js:

(function(app){
    app.AppModule = 
        ng.core.NgModule({
            // what other modules this module uses
            imports: [ ng.platformBrowser.BrowserModule ],
            // which components and directives we declare in our components
            declarations: [ app.AppComponent ],
            // which component to bootstrap at start
            bootstrap: [ app.AppComponent ]
        })
        .Class({
            constructor: function() {}
        });
})(window.app || (window.app = {}));

2.5 Bootstrap it!

Create main.js

(function(app){
    document.addEventListener(‘DOMContentLoaded’, function(){
        // the next three lines are actually one long line:
        // ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.AppModule);
        // and that’s how we run the app. we run this bootstrap function and pass in our root app module (app.AppModule). Easy!
        ng.platformBrowserDynamic
        .platformBrowserDynamic()
        .bootstrapModule(app.AppModule);
    });
})(window.app || (window.app = {}));

2.6 Add index.html

index.html goes one level up from app.

<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 - needed to run apps that rely on ES2015 promises
    and dynamic module loading -->
    

    <!-- We don't actually use this in this little app, but larger apps use them for observables. -->
    
    

    <!-- Here's the web development version of Angular -->
    
    
    
    
    

    <!-- 2. Load our 'modules' -->
    
    
    

  </head>

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

</html>

Angular (calls) bootstrapModule function in main.js –> (reads) AppModule metadata –> (sees) AppComponent is the bootstrap component –> (finds) myApp selector –> (locates) my-app element –> (renders) application’s view there.

2.7 Styles

Angular expects a CSS file in the root directory called styles.css.

2.8 Configure Server

Here’s what bs-config.json should contain:

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}       

2.9 Run

npm start

It’s not working. I’m looking at the console, and I’m on my own now.

Can’t find styles.css. I moved it into the src folder and that error is gone.

Moved main.js into the src folder and now the site loads. That’s a whole lot of work for a tiny site.

3 And so Forth

I finished this up without any problem. And then I began the Tour Of Heroes tutorial which is how it continues. And this is the page where I discovered that I have no clue what’s going on:

https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s