I am new to ng-route. I have a site called www.foo.com. And I just want to assign the template HTML (fooapi.view.html) and the controller (fooapi.controller.js) to the URLs like
www.foo.com/api?id=1&id=2&id=3
. I wonder if somebody could give some suggestion.Thanks.
First of all, you will need to install ng-route. To do so, you can either use npm or bower for the installation, or a manual way by downloading ng-route javascript file which can be found here
To install using bower
bower install angular-route
To install using npm
npm install angular-route
After, completing those steps, include the file named angular-route.min.js to your index.html, depending on where you have installed the downloaded files.
<script src="/bower_components/angular-route/angular-route.js"></script>
After doing so, include 'ngRoute' to you angular's module
angular.module('ngApp', ['ngRoute'])
Now you will have to create a angular's config module
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/foo/:id', {
templateUrl: 'fooapi.view.html'
controller: 'FooCtrl'
});
})
In your fooapi.controller.js
.controller('FooCtrl', function ($routeParams) {
//getting the id from the URL
console.log($routeParams.id);
});
Related
I am trying to setup a Laravel and Angular application. I wanted to place my work files under resources/assets/js and then use webpack and elixir to compile those code and create a single app.js file in my public directory. But I am not sure how to do that? Can anyone guide me with a step based approach for it?
Here is a gulp only process
No webpack used. Please anyone can rewrite this with Laravel Mix I would really appreciate.
1- Install npm modules
`npm i --S bower gulp gulp-concat gulp-uglify`
2- Install Angular with bower
bower install --save angular angular-sanitize angular-ui-router
3- Now that you have your angular assets in bower_components, create a file at the root of your project to load all vendors. Let's create /vendor.json
[
"bower_components/angular/angular.min.js",
"bower_components/angular-sanitize/angular-sanitize.min.js",
"bower_components/angular-route/angular-route.min.js"
]
Add all your vendors to that file. Bower or Npm vendors. Anything you download that is not part of your code.
4- Go to /gulpfile.js and add a task
var gulp = require('gulp),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
gulp.task('vendorjs', function() {
var source = require('./vendorjs.json');
return gulp.src(source)
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public/assets/js'))
});
That task will compile all vendors assets to /public/assets/js/vendors.min.js
5- In resources/assets/js, create following directories controllers, modules and the file app.js. Inside of app.js do
// 'resources/assets/js/app.js'
(function(){
angular
.module('myApp', ['app.core', 'app.controllers']);
})();
6- In the modules directory create core/module.js. This is the core module where you load all external modules loaded via bower or npm.
// 'resources/assets/js/modules/core/module.js'
(function(){
angular
.module('app.core', ['ngRoute', 'ngSanitize']);
})();
7- Still in the modules directory create controllers/module.js. All your controllers will be bound to this module.
// 'resources/assets/js/modules/controllers/module.js'
(function(){
angular
.module('app.controllers', []);
})();
8- Now you can write your controllers like this
// 'resources/assets/js/controllers/home.js'
(function(){
angular
.module('app.controllers')
.controller('HomeController', Controller);
//Use injection for assets minification
HomeController.$inject = ['$scope', '$http'];
function HomeController($scope, $http)
{
var vm = this;
activate();
function activate()
{
vm.sayHi = function() {
console.log('Hi');
}
}
}
})();
9- If you want to define routes
// 'resources/assets/js/modules/routes/routes.js'
(function(){
angular
.module('app.routes', [])
.config(routesConfig);
//Use injection for assets minification
routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider'];
function routesConfig($stateProvider, $locationProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '/templates/home.html',
controller: 'HomeController'
})
...
}
})();
10 - Create angular task in gulpfile
gulp.task('angular', function() {
var root = 'resources/assets/js';
var source = [
root + '/app.js',
root + '/modules/**/*module.js',
root + '/controllers/**/*js'
];
return gulp.src(source)
.pipe(concat('app.min.js'))
.pipe(uglify()) //comment this line when in development
.pipe(gulp.dest('public/assets/js'))
});
I think that's it. I may have made one or 2 typos, but angular that's the gist of it. How I use gulp with laravel for angular
I couldn't do this from scratch but there is a package that uses lumen, angular2. Providing a link for the same so anyone with the same problem can be benefited. Link: anvel.io
I started my first angular application, and am running into an issue where my "home" module isn't working because of a dependency issue. I don't see any dependency missing that I would need. I am using $stateProvider, and $urlProvider, but I am injecting that into the configuration for the home module, so I'm not sure where the problem would lie ?
Config.$inject = ["$stateProvider", "$urlRouterProvider"];
angular.module('home', []).config(Config)
function Config($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/login',
templateUrl: './views/login.html'
})
}
angular.module('home').controller('loginCtrl', function($scope){
$scope.helloWorld = function(){
console.log("This works!")
}
})
The consoled error:
[$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=home&p1=Error%3A%20…
Since "$stateProvider" and "$urlRouterProvider" providers are not part of the core AngularJS module, you need to inject modules, that have this provides into your home module definition. As far as I know, $stateProvider is from ui router module, so
angular.module('home', ['ui.router']).
...
Keep in mind that you also need to include this Javascript in your HTML file. It is in the angular-ui-router file
<script src="js/angular-ui-router.min.js"></script>
I am using the yeoman generator generator-angular-fullstack from https://github.com/angular-fullstack/generator-angular-fullstack
I created a project using
yo angular-fullstack
I then wanted to add a new route in the app which i did using
yo angular-fullstack:route myroute
I can see the new files being generated like show in the screenshot below
I see this in myroute.js
angular.module('invoice1App')
.config(function ($routeProvider) {
$routeProvider
.when('/myroute', {
templateUrl: 'app/myroute/myroute.html',
controller: 'MyrouteCtrl'
});
});
But whenever i try to open localhost:port/myroute i get redirected back to the home page. I can't figure this out since last two days. Any help will be deeply appreciated.
You have missed /#/ try localhost:port/#/myroute
you have to check the app.js file. It is in the scripts folder
make sure you check the
.config(function ($routeProvider) {
// the routing
}
Probably a newbie's question, but I need to add the ngDialog module to angular.
I noticed that after installing with bower Yeoman doesn't automatically update files, so I added
<script src="bower_components/ngDialog/js/ngDialog.js"></script>
to index.html.
I went ahead and added 'ngDialog' to the main module dependencies, like this
angular.module('sigaApp', ['ngDialog'])
.controller('MainCtrl', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
I also added $scope and 'ngDialog' to my controller, like this
angular.module('sigaApp')
.controller('myNewCtrl', ['$scope', 'ngDialog',
function ($scope, ngDialog) {
$scope.open = function () {
ngDialog.open({ template: 'templateId' });
};
}
]
);
That's ALL I did. Grunt refreshes the page with no error, and the page console shows no error, but the page shows nothing, and I have just no idea why.
Should it load the dependencies automatically, and I shouldn't be adding these injections manually?
Is there another standard way to add the dependencies?
Any help is appreciated. Thanks!
Answering my own question: Removed the module and installed with bower install ng-dialog --save adding --save to the command line.
What the --save parameter does, actually is that it "Save installed packages into the project's bower.json dependencies" (quoting bower help) and as far as I'm aware of, there's where Yeoman takes the dependencies from to update index.html.
var voteApp = angular.module('VoteApp', [
'ngRoute',
'students'
]);
voteApp.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl : 'index.html',
controller : 'MainController'
});
});
voteApp.controller('MainController',['$scope',function($scope){
}]);
On loading, the whole page will crash!
Can anyone help me with this?
Did you run your application on a server? If not go to your terminal and type in this: python -m SimpleHTTPServer and then open your application on localhost
Try using angular-ui-router instead of angular-route
What is the difference between angular-route and angular-ui-router?