https://programmingmentor.com/tags/angular/ Recent content in Angular on programming mentor Hugo -- gohugo.io en-us Thu, 16 Nov 2017 18:20:24 +0200 https://programmingmentor.com/post/ng-girls-to-do-angular-5/ Thu, 16 Nov 2017 18:20:24 +0200 https://programmingmentor.com/post/ng-girls-to-do-angular-5/ Doing ng-girls ToDoList tutorial in Angular 5 Description: Doing ng-girls ToDoList tutorial in Angular 5 from the very beginning to publishing on GitHub Pages (real-time screencast in 4K resolution) Links: Ng-girls website: http://ng-girls.org/ Link to tutorial: https://www.gitbook.com/book/ng-girls/todo-list-tutorial/details Source code for the project: https://github.com/programmingmentor/ng-girls-todo Published on GitHub pages: https://programmingmentor.github.io/ng-girls-todo/ https://programmingmentor.com/post/angular-5-top-features/ Thu, 02 Nov 2017 10:54:24 +0200 https://programmingmentor.com/post/angular-5-top-features/ Angular 5 has been released on November, 1 2017. Let’s take a look on 5 most interested new features of popular SPA framework. 1. Angular Universal support Angular Universal is a project that allows server-side rendering for Angular apps. In pre-5.0 releases of Angular support of server-side rendering was not smooth enough. Now Angular 5 has ServerTransferStateModule and corresponding BrowserTransferStateModule that allows to transfer state between client and server smoothly. https://programmingmentor.com/post/angular-routing/ Tue, 01 Aug 2017 11:54:24 +0200 https://programmingmentor.com/post/angular-routing/ Intro In this tutorial we will learn Angular routing on practice. Link to source code: (https://github.com/programmingmentor/angular-routing)[https://github.com/programmingmentor/angular-routing] See working sample below (enter any search string to get ouput from YouTube): Prerequisites Install Node.js. Install angular-cli: npm i -g @angular/cli Generate project: ng new angular-routing Routing components in Angular Routes defines the routes for application RouterOutlet used in template and shows where to put the content of each route RouterLink directive is used to link to routes Import Modules import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { RouterModule, Routes } from '@angular/router'; Define routes const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact', component: ContactComponent }, { path: 'contactus', redirectTo: 'contact' } ]; Declare imports for Component imports: [ BrowserModule, FormsModule, HttpModule, RouterModule. https://programmingmentor.com/post/angular-youtube-search-app/ Thu, 27 Jul 2017 10:54:24 +0200 https://programmingmentor.com/post/angular-youtube-search-app/ Intro In this tutorial based on sample from ng-book2 we will create YouTube search app. Link to source code: https://github.com/programmingmentor/angular-youtube-search-app See working sample below (enter any search string to get ouput from YouTube): Prerequisites Install Node.js. Install angular-cli: npm i -g @angular/cli Generate project: ng new angular-youtube-search-app Create YouTube search service Create service component with Angular-Cli: ng g s youtube-search We will get empty service class: https://programmingmentor.com/post/angular-forms/ Tue, 25 Jul 2017 10:54:24 +0200 https://programmingmentor.com/post/angular-forms/ Prerequisuites Install Node.js. Install angular-cli: npm i -g @angular/cli Generate project: ng new angular-forms Regular HTML form This is how regular html form looks like: <form> <label>Name <input type="text" placeholder="Name" name="name"> </label> <input type="submit"> </form> We will create same form with Angular using two approaches: template-driven - form including validations is described in HTML template and Angular generates data model from it automatically or allows to bind it to existing model reactive - form model is described in TypeScript source code and it need to be bound to HTML-form Template-driven form We start with Angular template-driven form: https://programmingmentor.com/post/angularjs-phonecat-tutorial/ Sat, 01 Apr 2017 10:54:24 +0200 https://programmingmentor.com/post/angularjs-phonecat-tutorial/ AngularJS PhoneCat Tutorial