i am new to angular js .
Please help me.
i readed some blogs on angular views and route and i implemented the code for view and route .
the code was not working. As I include angularoute.js to code then it works fine for me .
But in all the blogs they are not including the angularoute.js to code.
So my question is that is route logic was removed from angular.js or i am doing something wrong.
In angular 1.0, routing was part of the core angular.js module. Since 1.2, they've made it an external module, in an external file. What you're doing is thus fine, and the blogs you read have probably been written before angular 1.2, or neglected to precise that this additional file had to be added.
The official documentation is quite clear about it, though:
First include angular-route.js in your HTML:
<script src="angular.js">
<script src="angular-route.js">
...
I strongly suggest you to use aungular-ui-router. Basically it's the same as angular-route but it has much much more features. There are the nested views option, also you can pass parameters over different states. You can easily assert in which state you are and based on that change the view or do something else. Another aswe feature is that you can have multiple named view on a single page which means you can load different templates on this page. The documentation is pretty awesome with this one as well. You might want to take a look. Also when you have some issues you better paste some code so people could see where could something possibly be wrong.
The Angular UI - 3rd party lib.
Related
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.
It works fine when the page is opened normally but does not when its open as a modal. The expressions show up as literal text. Do I have to use the Angular Bootstrap UI? Does anyone have an example of how this is done? My modals are stored as partials
You need to use
http://angular-ui.github.io/bootstrap/
its simple to use, just include the javascript, a little CCS and angular.module('myModule', ['ui.bootstrap']);
Once added you have todo some things a different way, plenty of examples on the angular site. One of the main issue it solves is problems when href # is used.
This may not be the fix for you, but you should be using it. Do you have a plunk?
You need to add the Boostrap as a dependency to the angular Application,
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
and App,
angular.module('modalTest',['ui.bootstrap','dialogs'])
Here is an existing CodePen
As others have said, libraries exist to bring bootstrap into the angular world. Keep in mind, a lot of things are done differently when using them in how you set up your DOM. Bootstrap uses a lot of things in location.hash for controls, which conflicts with angular routing.
The issue is that when Bootstrap pops up a modal, angular has no idea that happened, and that it has a new part of the DOM to compile. If you don't want to pull in the angular bootstrap library (which is pretty good, and should be used if your starting a new page from scratch with the two), you can use $compile linked with a callback into angular (probably via a factory you make) to manually compile what you need.
I have generated a meanjs crud module with: yo meanjs:crud-module modulename.
How do i go about changing the meta data values for view.modulename.client.html since their generated on the server side (layout.server.view.html)? I can't seem to find ng-app="" any where, so I could just chuck that into the head tag along with a controller.
Everything else is hooked up quite nicely and its easy to create a basic CRUD app, except for the meta data. I'm trying to change them from the create.modulename.client.html via the form it provides, I get correct values in the body to show up but not in the head. What's best practice here?
For simplicity, I just used jQuery as discussed in these SO answers for title and description.
There are more 'angular' approaches listed here, but they require moving app / controller declarations to the html tag, creating directives, or downloading modules.
The jQuery approach allows you to keep the meta descriptions coupled with the controller primarily responsible for the page, all without making any changes to the meanjs default structure.
I'm working on a big project. This project already has complicated structure. Most pages are generated on server-side with Twig.
Now we move the project to AngularJS.
It is not possible to use angular-way routing on whole project just now. But somewhere, it is necessary.
And here comes our trouble.
If I add 'ng-app' in html tag, for example, on some pages angular add hash in url.
And what is strange for me, that it's not everywhere.
On start page (project/profile9868766), url is clear as it is. But on some other (project/community/list), angular does something like that: project/community/list/#list .
And it is extremely undesirable.
There are no any angular routes, configured in $route service yet.
Please, help me to find out what causes that behavior, and what should i do to make all the things to go right way.
I want to add ng-app in html tag and not get any troubles with existing code, that may use hashes. And I want to use angular directives, controllers and other stuff, including $location service to set and track hashes on some pages. And later move everything to Angular and only after that start using Angular routes.
Thanks!
PS: English is not my native language, sorry about some weird constructions and mistakes. ))
Make sure to turn on html5mode
http://docs.angularjs.org/guide/dev_guide.services.$location
But the hash is inevitable on non-html5 browser.
The latest version of angular (v1.0.7) seems to have fixed this issue.
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