Tutorial by Examples: angular

Use browser.driver instead of driver Use browser.driver.ignoreSynchronization = true Reason: Protractor waits for angular components to load completely on a web-page befor it begins any execution. However, since our pages are non-angular, Protractor keeps waiting for 'angular' to load till the tes...

The component code is given as below. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>{{title}}</h1>' }) export class MyAppComponent{ title = 'welcome'; } For angular testing, angular provide its testing utilities along with t...

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> CORS with Windows Authentication test (Angular) <script type="text/javascript"> var app = angular.module('myApp', []); app.c...

FormComponent.ts import {Component} from "@angular/core"; import {FormBuilder} from "@angular/forms"; @Component({ selector: 'app-form', templateUrl: './form.component.html', styleUrls: ['./form.component.scss'], providers : [FormBuilder] }) export class FormComp...

Implemented in a router: export const MainRoutes: Route[] = [{ path: '', children: [ { path: 'main', component: MainComponent , canActivate : [CanActivateRoute] }] }]; The canActivateRoute file: @Injectable() export class CanActivateRoute implements CanActi...

service I created post service with postRequest method. import {Injectable} from '@angular/core'; import {Http, Headers, Response} from "@angular/http"; import {PostModel} from "./PostModel"; import 'rxjs/add/operator/map'; import {Observable} from "rxjs"; ...

run the follows commands at cmd npm install -g protractor webdriver-manager update webdriver-manager start **create protractor.conf.js file in the main app root. very important to decleare useAllAngular2AppRoots: true const config = { baseUrl: 'http://localhost:3000/', s...

Requirements: NodeJS : Download page npm or yarn Run the following commands with cmd from new directory folder: npm install -g @angular/cli or yarn global add @angular/cli ng new PROJECT_NAME cd PROJECT_NAME ng serve Open your browser at localhost:4200

In angular-cli.json at outDir key you can define your build directory; 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 ...

ng new NewProject or ng init NewProject

You can load AngularJS services in vanilla JavaScript using AngularJS injector() method. Every jqLite element retrieved calling angular.element() has a method injector() that can be used to retrieve the injector. var service; var serviceName = 'myService'; var ngAppElement = angular.element(do...

NPM If external library like jQuery is installed using NPM npm install --save jquery Add script path into your angular-cli.json "scripts": [ "../node_modules/jquery/dist/jquery.js" ] Assets Folder You can also save the library file in your assets/js directory and in...

To use jquery in your Angular 2.x components, declare a global variable on the top If using $ for jQuery declare var $: any; If using jQuery for jQuery declare var jQuery: any This will allow using $ or jQuery into your Angular 2.x component.

To create a new project ng new [project-name] which initializes git.Install packages for tooling via npm. It creates the project successfully. cd [project-name] and execute either npm start or ng serve It'll run the server in the given default port. Application will refresh according to the chan...

Steps: Create Empty .Net Core Web App: Go to wwwroot, and create a normal html page called Index.html: Configure Startup.cs to accept static files (this will require to add "Microsoft.AspNetCore.StaticFiles": "1.0.0" library in the “project.json” file): ...

A SIMPLE TEMPLATE Let’s start with a very simple template that shows our name and our favorite thing: <div> Hello my name is {{name}} and I like {{thing}} quite a lot. </div> {}: RENDERING To render a value, we can use the standard double-curly syntax: My name is {{name}} P...

Startup.cs using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Identity.EntityFrameworkCore; using Microsoft.EntityFrameworkCore; using Microsoft.E...

Download seed Run dotnet restore Run npm install Always. Enjoy. https://github.com/SamML/CoreAngular000

How to: CALL ANGULAR 2 HTML/JS COMPONENT FROM ASP.NET Core CONTROLLER: We call the HTML instead return View() return File("~/html/About.html", "text/html"); And load angular component in the html. Here we can decide if we want to work with same or diferent module. Depends o...

webpack.config.js const webpack = require("webpack") const helpers = require('./helpers') const path = require("path") const WebpackNotifierPlugin = require('webpack-notifier'); module.exports = { // set entry point for your app module "entry": { ...