gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Ionic guide update (#22209)

Browse Source 
* updated angular guide to focus on angular 2+

* updated intro to ionic guide
This commit is contained in:
Dom Slatford
2018-11-24 08:28:50 +00:00
committed by Huyen Nguyen
parent ad4d7c72b2
commit 97ef234fe4
3 changed files with 26 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
guide/english/angular/index.md
View File

@ -8,73 +8,27 @@ title: Angular
## Angular ## Angular
![angular logo](https://angular.io/assets/images/logos/angular/angular.png) ![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 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.
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.
## Version History ## 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. 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**: **Install**:
We can add Angular either by referencing the sources available or downloading the framework. 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.
**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
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
```
Download/install: We can download the framework with npm, Bower or composer
**Angular 1.x**:
npm
```shell
npm install angular
```
Then add a `<script>` to your `index.html`:
```html
<script src="/node_modules/angular/angular.js"></script>
```
bower
```shell ```shell
bower install angular npm install -g @angular/cli
```
Then add a `<script>` to your `index.html`:
```html ng new example-app
<script src="/bower_components/angular/angular.js"></script>
cd example-app
ng serve
``` ```
For more information regarding the documentation, refer to the official site of [AngularJS](https://docs.angularjs.org/api) 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]
**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)
*Note : Please refer the Angular documentation for the updated information.* *Note : Please refer the Angular documentation for the updated information.*

5
guide/english/angularjs/index.md
View File

@ -3,8 +3,9 @@ title: AngularJS
--- ---
## AngularJS ## AngularJS
[AngularJS](https://angularjs.org/) is an open source front-end JavaScript framework. AngularJS extends HTML to develop rich and powerful front-ends. 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 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 ## AngularJS Expressions
- Expressions can be written inside double braces: `{{ expression }}` - Expressions can be written inside double braces: `{{ expression }}`

39
guide/english/ionic/index.md
View File

@ -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. 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: ### Before we can start playing with Ionic. Let’s prepare our system first:
``` 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.
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.
``` Prerequisites:
sudo apt-get update
sudo apt-get install nodejs
```
### Node.js package manager (npm)
``` - nodejs / npm
sudo apt-get install npm - xcode (if wanting to build iOS apps)
``` - Android SDK (if building Android apps)
### Ionic 2 and cordova
``` Install ionic CLI:
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
```shell
npm i -g ionic cordova
``` ```
Create a new project and run in the browser:
```shell
ionic start MyFirstApp blank ionic start MyFirstApp blank
cd MyFirstApp cd MyFirstApp
ionic serve ionic serve