Angular 2 - Misc

angular2

// Angular 2 - Miscellaneous:

Built-in services: $resources, $http, $q.  $http is built on top of $q, and 
$resource is built on top of $http.

$ means it is built-in by Angular.

We can write custom services.

Angular extends HTML.

Built-in directives: ng-hide, ng-show, ng-repeat, ng-app

We can write custom directive.

NgForce is an Angular service for visualforce remoting bridge for all sorts of
remoting, data inside Salesforce.  NgForce has a lot of helper methods.

vfr service
vfr.query
vfr.queryFromFieldset()
vfr.soqlFromFieldset()
vfr.describePicklist

vfr.query("select ... from ..").then(function(){..}).
then(function(){...}),
function(error) {
  // This is the error handler
  log(error);
});

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 = {}));

In the above code, we create 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.  The index.html file is above and outside of the app foler:

<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.

The above code loads a polyfill for IE.  IE requires this polyfill to run
applications that relies on ES2015 promises and dynamic module loading. Next are
the polyfills for Angular (zone.js, Reflect.js and the Reactive Extension RxJS
library).  QuickStart doesn't use the Reactive Extensions but any substantial 
application will want them when working with observables.

We use the backtick around the template so that we can have templates that spans
multiple lines, and so that we can use single quotes and double quotes in our
template HTML.

If we want to put the template into a file of its own, we need to update
the component file to use the templateUrl property instead of the template
property:

@Component({
  moduleId: module.id,
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
})

In the above code, we set the moduleId property to module.id for module-relative 
loading of the templateUrl. 

The styleUrls property is an array of style file names (with paths). We could 
list multiple style files from different locations if we needed them.

ng build // build our project
    // The build artifacts will be stored in the dist/ directory.

Build for a specific target or environment:

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

ng build can specify both a build target (—target=production or 
—target=development) and an environment file to be used with that build 
(--environment=dev or --environment=prod). By default, the development build 
target and environment are used.

The mapping used to determine which environment file is used can be found in 
angular-cli.json:

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

These options also apply to the serve command. If you do not pass a value for 
environment, it will default to dev for development and prod for production.

You can also add your own env files other than dev and prod by doing the 
following:

1. create a src/environments/environment.NAME.ts

2. add { "NAME": 'src/environments/environment.NAME.ts' } 
   to the the apps[0].environments object in angular-cli.json

3. use them via the --env=NAME flag on the build/serve commands.

When building you can modify base tag (<base href="/">) in your index.html 
with --base-href your-url option:

ng build --base-href /myUrl/
ng build --bh /myUrl/

Tests will execute after a build is executed via Karma, and it will 
automatically watch your files for changes. You can run tests a single time 
via --watch=false.

Before running the tests make sure you are serving the app via ng serve. 
End-to-end tests are run via Protractor

Using the proxying support in webpack's dev server we can highjack certain urls 
and send them to a backend server. We do this by passing a file to 
--proxy-config. Say we have a server running on http://localhost:3000/api and 
we want all calls th http://localhost:4200/api to go to that server. We create 
a file next to projects package.json called proxy.conf.json with the content:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

We can read more about what options are available at
https://webpack.github.io/docs/webpack-dev-server.html#proxy. And then we edit 
the package.json file's start script to be:

"start": "ng serve --proxy-config proxy.conf.json",

now run it with npm start.

Deploy our application via GitHub Pages:

ng github-pages:deploy --message "Optional commit message"

This will do the following:

1. creates GitHub repo for the current project if one doesn't exist
2. rebuilds the app in production mode at the current HEAD
3. creates a local gh-pages branch if one doesn't exist
4. moves your app to the gh-pages branch and creates a commit
5. edit the base tag in index.html to support github pages
6. pushes the gh-pages branch to github
7. returns back to the original HEAD

Creating the repo requires a token from github, and the remaining functionality 
relies on ssh authentication for all git operations that communicate with 
github.com. To simplify the authentication, be sure to setup your ssh keys. 
If you are deploying a user or organization page, you can instead use the 
following command:

ng github-pages:deploy --user-page --message "Optional commit message"

This command pushes the app to the master branch on the github repo instead of 
pushing to gh-pages, since user and organization pages require this.

To lint and format our code:

ng lint

This will use the lint npm script that in generated projects uses tslint. You 
can modify the these scripts in package.json to run whatever tool you prefer.

Angular-CLI supports all major CSS preprocessors.  To use these prepocessors 
simply add the file to your component's styleUrls:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

When generating a new project you can also define which extension you want 
for style files:

ng new applicationName --style=sass

Or set the default style on an existing project:

ng set defaults.styleExt scss
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License