From 97ef234fe404559ef6ec172a0c56c62474e34a93 Mon Sep 17 00:00:00 2001 From: Dom Slatford Date: Sat, 24 Nov 2018 08:28:50 +0000 Subject: [PATCH] Ionic guide update (#22209) * updated angular guide to focus on angular 2+ * updated intro to ionic guide --- guide/english/angular/index.md | 66 +++++--------------------------- guide/english/angularjs/index.md | 5 ++- guide/english/ionic/index.md | 39 +++++++------------ 3 files changed, 26 insertions(+), 84 deletions(-) diff --git a/guide/english/angular/index.md b/guide/english/angular/index.md index 133b0c55b4..7a826e5783 100644 --- a/guide/english/angular/index.md +++ b/guide/english/angular/index.md @@ -8,73 +8,27 @@ title: Angular ## Angular ![angular logo](https://angular.io/assets/images/logos/angular/angular.png) -AngularJS (versions 1.x) is a JavaScript based open source Framework. It is cross platform and used to develop Single Page Web Applications (SPWA). AngularJS implements the Model-View-Controller(MVC) pattern to separate the logic, presentation and data components. It also uses dependency injection to make use of server-side services in client side applications. - -Angular(versions 2.x and up) is a Typescript based open source framework to develop front-end Web application. Angular has following features like generics, static-typing and also some ES6 features. +Angular(versions 2 and up) is a Typescript based open source framework to develop front-end Web application. It is the successor of AngularJS and all mention of Angular should refer to versions 2 and up. Please see the seperate AngularJS catagory for its respective guides. Angular has following features like generics, static-typing and also some ES6 features. ## Version History Google released the initial version of AngularJS on October 20,2010. Stable release of AngularJS was on December 18, 2017 of version 1.6.8. Angular 2.0 release took place on Sep-22 2014 at ng-Europe conference. One of the feature of Angular 2.0 is dynamic loading and modularity, most core functionality has moved to modules. -After some modifications, Angular 4.0 was released on Dec-2016. Angular 4 is backward compatible with Angular 2.0. HttpClient library is one of the feature of Angular 4.0. Angular 5 release was on November 1, 2017. Support for Progressive web apps was one of the improvement in the Angular 5.0. Angular 6 release was in May 2018. The latest stable version is [7.0.0](https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c), which was release in October 2018. +After some modifications, Angular 4.0 was released on Dec-2016. Angular 4 is backward compatible with Angular 2.0. HttpClient library is one of the feature of Angular 4.0. Angular 5 release was on November 1, 2017. Support for Progressive web apps was one of the improvement in the Angular 4.0. Angular 6 release was in May 2018 and Angular 7 in October 2018. The latest stable version is [7.0.0](https://angular.io/guide/releases) **Install**: -We can add Angular either by referencing the sources available or downloading the framework. - -**Install using Angular CLI** - -npm install -g @angular/cli -ng new app-name -cd app-name -ng serve - -For more information follow the link https://cli.angular.io/ - -**Link To Source**: - -AngularJS: We can add AngularJS(Angular 1.x versions) by referencing the Content Delivery Network from Google. - -```html - -``` - -Download/install: We can download the framework with npm, Bower or composer - -**Angular 1.x**: - -npm - -```shell -npm install angular -``` -Then add a ` -``` - -bower +The easiest way to install Angualr is through the (CLI project)[https://cli.angular.io/] this tool allows the creation of new projects and generating components/services/modules etc to a standard the Angular team consider to be best practices. ```shell -bower install angular -``` -Then add a ` +ng new example-app + +cd example-app + +ng serve ``` -For more information regarding the documentation, refer to the official site of [AngularJS](https://docs.angularjs.org/api) - -**Angular 2.x**: - -npm - -```shell -npm install -g @angular/cli@latest -``` - -You can create **Angular 2.x** and other version projects by following the steps from the official documentation of [Angular](https://angular.io/guide/quickstart) - +For more information regarding the documentation, refer to the official docs for the (CLI)[https://cli.angular.io/] or (Angular documentation)[https://angular.io/docs] *Note : Please refer the Angular documentation for the updated information.* diff --git a/guide/english/angularjs/index.md b/guide/english/angularjs/index.md index 1757d9e233..f8a5aec9ed 100644 --- a/guide/english/angularjs/index.md +++ b/guide/english/angularjs/index.md @@ -3,8 +3,9 @@ title: AngularJS --- ## AngularJS -[AngularJS](https://angularjs.org/) is an open source front-end JavaScript framework. AngularJS extends HTML to develop rich and powerful front-ends. -It reduces the repetitive use of HTML code. This repetition can be avoided by using the directives provided by AngularJS which saves much time and effort. +AngularJS (versions 1.x) is an open source front-end JavaScript framework. AngularJS extends HTML to develop rich and powerful front-ends. +It reduces the repetitive use of HTML code. This repetition can be avoided by using the directives provided by AngularJS which saves +much time and effort. It is cross platform and used to develop Single Page Web Application (SPWA). AngularJS implements the MVC pattern to separate the logic , presentation and data components. It also uses dependency injection to make use of server-side services in client side applications. ## AngularJS Expressions - Expressions can be written inside double braces: `{{ expression }}` diff --git a/guide/english/ionic/index.md b/guide/english/ionic/index.md index 956a2386b8..3e4384dce0 100644 --- a/guide/english/ionic/index.md +++ b/guide/english/ionic/index.md @@ -11,40 +11,27 @@ Hybrid apps have many benefits over pure native apps, specifically in terms of p Those familiar with web development will find the structure of an Ionic app straightforward. At its core, it’s just a web page running in an native app shell! That means we can use any kind of HTML, CSS, and Javascript we want. -The bulk of an Ionic app will be written in HTML, Javascript, and CSS. Ionic also uses AngularJS for a lot of the core functionality of the framework. +As of Ionic 2, the framwork uses Angular (previously using AngularJS), please see seperate freeCodeCamp guides on Angular. ### Before we can start playing with Ionic. Let’s prepare our system first: -``` - nodeJS and npm - Ionic 2 - Cordova - Android Environment (or iOS if you’re working on a MacOS) -``` - -### First thing first, we need to have Node.js and npm. +The easiest way to use Ionic is via its [CLI](https://ionicframework.com/docs/cli/). Those familiar with [Angular's CLI](https://cli.angular.io/) should see some resemblances. -``` - sudo apt-get update - sudo apt-get install nodejs -``` - -### Node.js package manager (npm) +Prerequisites: -``` - sudo apt-get install npm -``` - -### Ionic 2 and cordova +- nodejs / npm +- xcode (if wanting to build iOS apps) +- Android SDK (if building Android apps) -``` - sudo npm install -g ionic cordova -``` - -### Now sit back and relax, give it some time to finish, it can take several minutes depending on your internet connection. -Once that’s done, Let’s start off by generating a new project based on the “blank” template +Install ionic CLI: +```shell + npm i -g ionic cordova ``` + +Create a new project and run in the browser: + +```shell ionic start MyFirstApp blank cd MyFirstApp ionic serve