I'm having a hard time setting up a project with angular and foundation 3 (rails in backend). So I have been searching a lot but there aren't many results.
I'm serving angular from a subfolder (localhost:3000/app), and started the html something like this
!!!5
%html{ "ng-app" => "App" }
%head
-# I tried this for html5 url on angular, not so much help so far
%base{:href => "/app/"}
%title
NG APP
...
%body
%header
...
%main
= yield
%footer
...
= javascript_include_tag "application"
= yield :javascripts
A couple of view work just fine. But when I tried to use the foundations tab, I could make work, because angular pass the anchor as a url that shold be check against $routeProvider.
So, I check some question here, and part of the answers give me the impression that foundation work fine enabling html5 mode in angular. (Which I could make it) and other answers say that in order to make work foundation with angular should write a directive for every component on foundation. Or the last case is moving to Twitter Bootstrap.
So, I can find a unified answer, could you please, confirm if right now I can use foundation with angular in a direct way. Thanks.
The best choice would be wrapping Foundation plugins in angular services or using only CSS/SASS provided with the framework and recreating the behaviour from scratch. Focus on prototyping using markup + stylesheets and then create logic in the angular way. At least, this is what I would do if I needed / had to use Foundation.
Twitter Bootstrap works in a similar way and the only advantage of moving to this framework is the fact that you can find plenty of angular modules / directives wrapping available plugins. In this case you wouldn't have to do the same job twice and well.
Take a look here: http://mgcrea.github.io/angular-strap/ in the first place.
Then look for bootstrap-based components in Bower.io Components Directory
Also, as some people in the comments have mentioned, you might need to bootstrap you application manually, which is as simple as wrapping you app in a module and running:
angular.bootstrap(element[, modules]);
// http://docs.angularjs.org/api/angular.bootstrap
As I said, it's usually better not to reinvent the wheel.
Edit:
There's an interesting discussion on Google Groups regarding this topic (and unsurprisingly users' conclusions are quite similar): https://groups.google.com/d/msg/angular/Htkzt7Fsaog/TeFm5l4snTwJ
Here is an almost complete adaptation of the Angular UI Bootstrap components to the Foundation CSS: http://madmimi.github.io/angular-foundation/.
You can use the angular-ui-foundation library on github, its probably the best place to start from,
https://github.com/mhayes/angular-ui-foundation
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Months ago, I decided to study Angular. When I was doing some advance and create some app using it, I realize that Angular 2 is in Developer preview, so it's a matter of time before it's going to be released. Because Angular 2 is not going to be compatible with Angular 1, and there are a lot of changes, the question is, is it better to continue developing with Angular 1.x or start developing Angular 2?
It's a fact that we don't always have to be using the latest version nor the newest language on the market, but in this case, the app is still small so I could change without problems.
Let me preface by saying, I'm assuming you and everyone who will be reading this is already comfortably with Angular 1 (now referred to as AngularJS, as opposed to simply Angular for the newer versions). That being said, let's get into some of the additions and key differences in Angular 2+.
They added an angular cli.
You can start a new project by running ng new [app name].
You can serve your project by running ng serve
learn more here: https://github.com/angular/angular-cli
Your angular code is written in ES6 Typescript and it compiles at runtime to Javascript in the browser.
To get a full grasp on this I recommend checking out some the resource list I have at the bottom of my answer.
Project Structure
In a basic structure, you will have a app/ts folder where you'll be doing most your work and a app/js You'll find in the app/js folder files with a .js.map extension. They "map" your ".ts" files to your browser for debugging as your browser cannot read native typescript.
Update: It's out of beta. The project structure changed a bit, in most cases and if you're using the angular cli, you'll be working in the
src/app/ folder. In a starter project, you'll have the following.
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css: CSS file you should use specific to the component.html
app.component.html: A view (variable declared in the app.component.js)
app.component.spec.ts: used for testing app.component.ts
app.component.ts: Your code that binds to app.component.html
app.module.ts: This it what kicks off your app and where you define all plugins, components, services, etc. This is the equivalent of the app.js in Angular 1
index.ts used to define or export project files
Additional information:
Pro tip: you can run ng generate [option] [name] to generate new services, components, pipes, etc.
Also the tsconfig.json file is important as it defines TS compile rules for your project.
If you're thinking I have to learn a whole new language?... Uh... kinda, TypeScript is a superset of JavaScript. Don't be intimidated; it's there to make your development easier. I felt like I had a good grasp on it after just a few hours playing with it, and had it all down after 3 days.
You bind to your HTML similarly like how you would if in an Angular 1 directive. So variable like $scope and $rootScope have been deprecated.
This one you may have been implied. Angular 2 is still a MV* but you'll be using 'components' as a way to bind code to your templates, for instance, take the following
import { Component } from '#angular/core';
#Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
Here think of the import statement as your dependency injection in a v1 controller. You use import to import your packages, where the import {Component} says you'll be making a component you'd like to bind to your HTML.
Notice the #Component decorator you have a selector and template. Here think of the selector as your $scope that you use like you use v1 directives where the name of the selector is what you use to bind to your HTML like so
<my-app> </my-app>
Where <my-app> is the name of your custom tag you'll use that will act as a placeholder for what's declared in your template. i.e.) <h1> Hello World! </h1>. Whereas this would look like the following in v1:
HTML
<h1>{{hello}}</h1>
JS
$scope.hello = "Hello World!"
Also can you add something between these tags to generate a loading message, like this:
<my-app> Loading... </my-app>
Then it will display "Loading..." as the loading message.
Note that what's declared in template is the path or the raw HTML you'll be using in your HTML in your selector tag.
A fuller implementation of Angular 1 would look more like this:
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
In v1 this would look something like
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
This is what I really like about v2. I found directive was a steep learning curve for me in v1 and even when I had them figured out I often had the CSS render not how I intended. I find this is way simpler.
V2 allows for easier scalability of your app since you can break up your app up easier than you could in v1. I like this approach as you can have all your working parts in one file as opposed to having several in angular v1.
What about converting your project from v1 to v2?
From what I've heard from the development team if you'd like to update your v1 project to v2 you'll just be going through and deleting deprecated blobs and replace your $scopes with selectors. I found this video helpful. It's with some of the Ionic team that are working side by side with the angular team as v2 has a stronger focus on mobile https://youtu.be/OZg4M_nWuIk
UPDATE: I updated by adding examples as official implementations of Angular 2 have surfaced.
UPDATE 2: This still seems to be a popular question so I just thought I'd some resource I found very helpful when I started working with angular 2.
#Helpful Resources:
For more on ES6, I recommend checking out The New Boston's ECMAScript 6 / ES6 New Features Tutorials - YouTube Playlist
To write Typescript functions and see how they compile to Javascript check out the Typescript language Playground
To see a function by function breakdown of what the Angular 1 equivalence is in Angular 2 see the Angular.io - Cookbook -A1 A2 Quick Reference
It might help you to understand the comparison of Angular 1 vs Angular 2.
The Angular 2 proved to have lots of benefits over Angular 1:
It is entirely component based.
Better change detection
Ahead of Time compilation (AOT) improves rendering speed.
TypeScript is primarily used for developing Angular 2 applications.
Angular 2 has better performance over Angular 1.
Angular 2 has a more powerful templating system than Angular 1.
Angular 2 has simpler APIs, lazy loading, easier debugging.
Angular 2 is much more testable than Angular 1.
Angular 2 provides nested components.
Angular 2 provides a way to execute more than two systems together.
And So On...
Angular 2 and Angular 1 is basically a different framework with the same name.
angular 2 is more ready for the current state of web standards and the future state of the web ( ES6\7, immutiablity, components, shadow DOM, service workers, mobile compatibilty, modules, typescript and so on and so on... )
angular 2 killed many main features in angular 1 like - controllers, $scope, directives (replaced with #component annotations), the module definition, and much more, even simple things like ng-repeat has not left the same as it was.
any way, change is good, angular 1.x had it flaws, and angular 2 is more ready for the future web requirements.
to sum things up - i do not recommend you to start an angular 1.x project now - this is probably the worst time to do so as you will have to migrate later to angular 2, i you set youre mind about angular than choose angular 2, google has already launched a project with angular 2, and by the time you finish the project angular 2 should already be in the spotlight.
if you want something stabler, you can think about react\elm and flux and redux as JS frameworks.
angular 2 is going to be awesome, that's for no doubt.
No framework is perfect. You can read about flaws in Angular 1 here and here. But that doesn't mean it is bad. The question is what problem are you solving. If you want to roll out a simple app quickly, which is lightweight, with limited data binding usage then go ahead with Angular 1. Angular 1 was built 6 years back to solve rapid prototyping which it does pretty well. Even if your use case is complex still you can use Angular 1 but then you should be aware of nuances and best practices around building a complex web app. If you are developing an app for learning purpose I would suggest to move to Angular 2 as that is where the future of Angular is.
The one stand-out feature in Angular v2 and also in ReactJs is that they both have embraced the new Web-Components architecture of development. What this means is that we can now create independent Web-Components and plug-and-play them to any website in the world that has the same technology stack of the this Web-Component. Cool! yeah very cool. :)
The other most prominent change in Angular v2 is that it's primary development language is none other than TypeScript. Although TypeScript belongs to Microsoft, and it is a superset of JavaScript of 2015 (or ECMAScript6/ES6), but it has some features that are very promising. I would recommend the readers to checkout TypeScript in a bit detail (which is fun of-course) after reading this tutorial.
Here I would say that the guys trying to interrelate Angular v1 and Angular v2 further confuse the readers, and in my humble opinion, Angular v1 and Angular v2 should be treated as two different frameworks. In Angular v2, we have Web-Components' concept of developing web applications, while in Angular v1 we have to play with Controllers, and (sadly or luckily) no controllers are present in Angular v2.
One thing to notice is angular2 is using typescript.
I did angular1 with cordova in my intern and now i am doing a angular 2. I think angular2 will be the trend as it more structured in my opinion but the cons is that there are few resources to refer when you have problem or difficulties. angular 1.x has tons of personalized directives that can be super easy to use.
Hope it helps.
Angular 2 is much better than 1, at least in what it offers: support for web components, using typescript, performance and overall simplicity of the interface, was the reason I decided to start a project using angular 2. However, from the get go, I realized there are issues in angular 2 (e.g. routing with apache) for which very little or no documentation is available, so the documentation and community of angular 2 is the biggest pitfall for angular 2, as it isn't developed enough.
I would say, if you need to raise a site quickly for a short deadline use the well known angular 1, if you're in a longer project, and can afford the time to investigate new issues (that you might be the first to encounter, which could be a bonus if you think of the contribution, you might give to the angular 2 community) than go with angular 2.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Months ago, I decided to study Angular. When I was doing some advance and create some app using it, I realize that Angular 2 is in Developer preview, so it's a matter of time before it's going to be released. Because Angular 2 is not going to be compatible with Angular 1, and there are a lot of changes, the question is, is it better to continue developing with Angular 1.x or start developing Angular 2?
It's a fact that we don't always have to be using the latest version nor the newest language on the market, but in this case, the app is still small so I could change without problems.
Let me preface by saying, I'm assuming you and everyone who will be reading this is already comfortably with Angular 1 (now referred to as AngularJS, as opposed to simply Angular for the newer versions). That being said, let's get into some of the additions and key differences in Angular 2+.
They added an angular cli.
You can start a new project by running ng new [app name].
You can serve your project by running ng serve
learn more here: https://github.com/angular/angular-cli
Your angular code is written in ES6 Typescript and it compiles at runtime to Javascript in the browser.
To get a full grasp on this I recommend checking out some the resource list I have at the bottom of my answer.
Project Structure
In a basic structure, you will have a app/ts folder where you'll be doing most your work and a app/js You'll find in the app/js folder files with a .js.map extension. They "map" your ".ts" files to your browser for debugging as your browser cannot read native typescript.
Update: It's out of beta. The project structure changed a bit, in most cases and if you're using the angular cli, you'll be working in the
src/app/ folder. In a starter project, you'll have the following.
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css: CSS file you should use specific to the component.html
app.component.html: A view (variable declared in the app.component.js)
app.component.spec.ts: used for testing app.component.ts
app.component.ts: Your code that binds to app.component.html
app.module.ts: This it what kicks off your app and where you define all plugins, components, services, etc. This is the equivalent of the app.js in Angular 1
index.ts used to define or export project files
Additional information:
Pro tip: you can run ng generate [option] [name] to generate new services, components, pipes, etc.
Also the tsconfig.json file is important as it defines TS compile rules for your project.
If you're thinking I have to learn a whole new language?... Uh... kinda, TypeScript is a superset of JavaScript. Don't be intimidated; it's there to make your development easier. I felt like I had a good grasp on it after just a few hours playing with it, and had it all down after 3 days.
You bind to your HTML similarly like how you would if in an Angular 1 directive. So variable like $scope and $rootScope have been deprecated.
This one you may have been implied. Angular 2 is still a MV* but you'll be using 'components' as a way to bind code to your templates, for instance, take the following
import { Component } from '#angular/core';
#Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
Here think of the import statement as your dependency injection in a v1 controller. You use import to import your packages, where the import {Component} says you'll be making a component you'd like to bind to your HTML.
Notice the #Component decorator you have a selector and template. Here think of the selector as your $scope that you use like you use v1 directives where the name of the selector is what you use to bind to your HTML like so
<my-app> </my-app>
Where <my-app> is the name of your custom tag you'll use that will act as a placeholder for what's declared in your template. i.e.) <h1> Hello World! </h1>. Whereas this would look like the following in v1:
HTML
<h1>{{hello}}</h1>
JS
$scope.hello = "Hello World!"
Also can you add something between these tags to generate a loading message, like this:
<my-app> Loading... </my-app>
Then it will display "Loading..." as the loading message.
Note that what's declared in template is the path or the raw HTML you'll be using in your HTML in your selector tag.
A fuller implementation of Angular 1 would look more like this:
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
In v1 this would look something like
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
This is what I really like about v2. I found directive was a steep learning curve for me in v1 and even when I had them figured out I often had the CSS render not how I intended. I find this is way simpler.
V2 allows for easier scalability of your app since you can break up your app up easier than you could in v1. I like this approach as you can have all your working parts in one file as opposed to having several in angular v1.
What about converting your project from v1 to v2?
From what I've heard from the development team if you'd like to update your v1 project to v2 you'll just be going through and deleting deprecated blobs and replace your $scopes with selectors. I found this video helpful. It's with some of the Ionic team that are working side by side with the angular team as v2 has a stronger focus on mobile https://youtu.be/OZg4M_nWuIk
UPDATE: I updated by adding examples as official implementations of Angular 2 have surfaced.
UPDATE 2: This still seems to be a popular question so I just thought I'd some resource I found very helpful when I started working with angular 2.
#Helpful Resources:
For more on ES6, I recommend checking out The New Boston's ECMAScript 6 / ES6 New Features Tutorials - YouTube Playlist
To write Typescript functions and see how they compile to Javascript check out the Typescript language Playground
To see a function by function breakdown of what the Angular 1 equivalence is in Angular 2 see the Angular.io - Cookbook -A1 A2 Quick Reference
It might help you to understand the comparison of Angular 1 vs Angular 2.
The Angular 2 proved to have lots of benefits over Angular 1:
It is entirely component based.
Better change detection
Ahead of Time compilation (AOT) improves rendering speed.
TypeScript is primarily used for developing Angular 2 applications.
Angular 2 has better performance over Angular 1.
Angular 2 has a more powerful templating system than Angular 1.
Angular 2 has simpler APIs, lazy loading, easier debugging.
Angular 2 is much more testable than Angular 1.
Angular 2 provides nested components.
Angular 2 provides a way to execute more than two systems together.
And So On...
Angular 2 and Angular 1 is basically a different framework with the same name.
angular 2 is more ready for the current state of web standards and the future state of the web ( ES6\7, immutiablity, components, shadow DOM, service workers, mobile compatibilty, modules, typescript and so on and so on... )
angular 2 killed many main features in angular 1 like - controllers, $scope, directives (replaced with #component annotations), the module definition, and much more, even simple things like ng-repeat has not left the same as it was.
any way, change is good, angular 1.x had it flaws, and angular 2 is more ready for the future web requirements.
to sum things up - i do not recommend you to start an angular 1.x project now - this is probably the worst time to do so as you will have to migrate later to angular 2, i you set youre mind about angular than choose angular 2, google has already launched a project with angular 2, and by the time you finish the project angular 2 should already be in the spotlight.
if you want something stabler, you can think about react\elm and flux and redux as JS frameworks.
angular 2 is going to be awesome, that's for no doubt.
No framework is perfect. You can read about flaws in Angular 1 here and here. But that doesn't mean it is bad. The question is what problem are you solving. If you want to roll out a simple app quickly, which is lightweight, with limited data binding usage then go ahead with Angular 1. Angular 1 was built 6 years back to solve rapid prototyping which it does pretty well. Even if your use case is complex still you can use Angular 1 but then you should be aware of nuances and best practices around building a complex web app. If you are developing an app for learning purpose I would suggest to move to Angular 2 as that is where the future of Angular is.
The one stand-out feature in Angular v2 and also in ReactJs is that they both have embraced the new Web-Components architecture of development. What this means is that we can now create independent Web-Components and plug-and-play them to any website in the world that has the same technology stack of the this Web-Component. Cool! yeah very cool. :)
The other most prominent change in Angular v2 is that it's primary development language is none other than TypeScript. Although TypeScript belongs to Microsoft, and it is a superset of JavaScript of 2015 (or ECMAScript6/ES6), but it has some features that are very promising. I would recommend the readers to checkout TypeScript in a bit detail (which is fun of-course) after reading this tutorial.
Here I would say that the guys trying to interrelate Angular v1 and Angular v2 further confuse the readers, and in my humble opinion, Angular v1 and Angular v2 should be treated as two different frameworks. In Angular v2, we have Web-Components' concept of developing web applications, while in Angular v1 we have to play with Controllers, and (sadly or luckily) no controllers are present in Angular v2.
One thing to notice is angular2 is using typescript.
I did angular1 with cordova in my intern and now i am doing a angular 2. I think angular2 will be the trend as it more structured in my opinion but the cons is that there are few resources to refer when you have problem or difficulties. angular 1.x has tons of personalized directives that can be super easy to use.
Hope it helps.
Angular 2 is much better than 1, at least in what it offers: support for web components, using typescript, performance and overall simplicity of the interface, was the reason I decided to start a project using angular 2. However, from the get go, I realized there are issues in angular 2 (e.g. routing with apache) for which very little or no documentation is available, so the documentation and community of angular 2 is the biggest pitfall for angular 2, as it isn't developed enough.
I would say, if you need to raise a site quickly for a short deadline use the well known angular 1, if you're in a longer project, and can afford the time to investigate new issues (that you might be the first to encounter, which could be a bonus if you think of the contribution, you might give to the angular 2 community) than go with angular 2.
I'm working on a Cordova application using AngularJS and OnsenUI. I'm having trouble with the documentation that's out there with respects to the call to ons.bootstrap().
Specifically, I am used to manually bootstrapping AngularJS applications in Cordova when needed -- i.e., either when the DOM loads, if I'm in a browser, or when the deviceready event fires, if I'm on a device, with a call to angular.bootstrap(document, [ 'myApp' ]).
I noticed that in Onsen, there's a necessary call to ons.bootstrap, with or without other parameters, such as ons.bootstrap('myApp', [...dependencies...]). I have fiddled around with this, and it seems like the only way I can get Onsen injected is if I use its bootstrapping call. However, elsewhere in my application's file, I'm still using the angular definitions (e.g., angular.module('myApp', [...dependencies...]).config(...).run(...)) and so forth.
I've found several things of questionable implementation, and haven't been able to find a definitive answer online as to this:
1) If I call angular.bootstrap within my initialization, Onsen never loads
2) If I use the ons.bootstrap call, things seem to work, but I end up repeating my dependencies within the bootstrapping call as well as my application definition using angular. This redundancy seems bad to me.
3) If I use both calls (not unexpectedly), I get a isWebView() already defined error, and the application goes nowhere.
Unfortunately, all of the examples on the Onsen website assumes all code (HTML, JS, etc.) like to reside in one spot, and doesn't seem to take Cordova into account. I've used Onsen in the past, but several versions ago, and the old methods of injection no longer seem to work.
So my question is, what is the way you're supposed to bootstrap and use Onsen, Angular, and Cordova together? Alternatively, is there a good example somewhere that doesn't involve Monaca?
Thanks in advance.
Of course there are good examples somewhere. Have you tried with the basic Onsen UI templates? They are provided in the 'Getting started' guide of Onsen UI and answer all your questions: http://onsen.io/download.html#download-templates
In short, Onsen UI is independent from Monaca and the only difference will be including Monaca's loader.js in your index.html (what includes OnsenUI, AngularJS, Cordova, etc.), or including all the libraries separately.
Also, ons.bootstrap() is optional, you can use angular.module('app', ['onsen']) if you want.
It is possible to use Cordova as well, you just need to include Cordova files as you would do in any other Cordova application. You can see it in the templates.
There are many examples out there with all of this, like the basic templates. More examples:
Onsen UI's Github: https://github.com/OnsenUI/OnsenUI/tree/master/demo
Onsen UI's blog: http://onsen.io/blog/developing-hybrid-mobile-apps-with-onsen-ui/
Hope it helps.
Well, for some reason, the only way I can get this thing to initialize appropriately is by using the Onsen bootstrap method and having it load all dependencies. Since ons.bootstrap() returns the Angular module, I'll use that for now.
So essentially, on the Cordova deviceready event, I call:
angular.module('myApp.controllers', []);
angular.module('myApp.services', []);
ons.bootstrap('myApp', [ ...dependencies... ]);
And yes, there are plenty of examples out there, but the ones that incorporate Cordova and exercise a reasonable organizational facsimile of how actual code would be used, being that different objects are defined within different files, in multiple folders, are quite lacking. Although admittedly by Google-Fu isn't necessarily great.
Thank you for your response.
I need to add new features to an already existing application. The application is built using Lithium and jQuery. The features that needs to be included have a complex view which allow users to analyze data and perform CRUD functionality. I won't go into details about the features here, but after working on a few simple Angular tutorials and side projects, I know that using AngularJS to create this view will make my life a lot more easier than creating the view using jQuery.
Over the course of the next few months we may convert the entire app to AngularJS.
I am uncertain about where I should place the Angular files and how to setup routing. How can I integrate AngularJS to Lithium so that part of the Lithium routing works and part of it is handled by AngularJS.
I also found this answer on stackoverflow but it doesn't mention folder structures or how to integrate Angular with Lithium. I think this link mentioned in the answers is supposed to have what I am looking for but it doesn't seem to exist anymore.
The link is down, but you can clone the source repository and run it yourself here: https://github.com/nateabele/li3-angular-presentation
Regarding organization, the simplest way would be to place the directory structure for your Angular components inside of /webroot. The more advanced (and in my opinion better) way would be to make them two separate applications: an AngularJS UI app, and a backend API in Li3 that it talks to.
Currently I'm looking for a plugin/js that I can use to show my users a small walkthrough of my site. I have jquery and angular both running on my page.
I have been using Chardin.js (https://github.com/heelhook/chardin.js). This plugin works and is simple, however when i try to include angular elements chardin.js will not be able to find the elements to display.
SO I'm trying to find a way to integrate this plugin with angular. Unless there are some better plugins that work better for this in angular. Thanks!
I agree with #Ben_Coding,
Angular-Intro is pretty good, light-weight, and no dependency on jQuery.