What i want to do is pass from my home application to a list. I have the list and my home on different .js files, but now, how can i show first my home, and then, with one click, send to the list?
My files, next. First the home code and view:
home-component.js
(function(){
'use strict';
var home = {
templateUrl: './app/components/list-component/home-component/home.html',
controller: homeCtrl
};
angular
.module('payApp')
.component('home', home);
function homeCtrl(){
var home = this;
}
})();
home.html
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-7">
<div class="title">
<h3><strong>¡Welcome!</strong></h3>
</div>
<br>
<div class="col-md-6 .col-md-offset-3">
<button class="btn btn-success" ng-click="">Start</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Then, my list files.
payment-component.js
(function(){
'use strict';
var pays = {
templateUrl: './app/components/list-component/paymentcompo.html',
controller: payCtrl
};
angular
.module('payApp')
.component('payInvoice', pays);
payCtrl.$inject = ["$scope"];
function payCtrl($scope){
}
})();
It's html view:
paymentcompo.html
<table class="table table-hover">
<thead>
<tr>
<th>Payment Number</th>
<th>Name</th>
<th>Tax Id</th>
</tr>
</thead>
<tbody>
<tr id="pool" ng-repeat="info in list | filter: search">
<th>{{info.Id}}</th>
<th>{{info.name}}</th>
<th>{{info.taxId}}</th>
</tr>
</tbody>
</table>
And, in the end, my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="payApp">
<meta charset="UTF-8">
<title>Pay This</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/componentes/css/pay-style.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<head>
</head>
<body>
<pay-Invoice></pay-Invoice>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script src="app/payapp.js"></script>
<script src="app/components/list-component/payment-component.js"></script>
<script src="app/components/list-component/home-component/home-component.js"></script>
<script src="app/factory/pay-factories.js"></script>
<script src="app/routes/routes.js">
</body>
</html>
I'd read that i need also use ngRoute, so i added and create my routes.js.
EDITED
This is my routes.js code:
(function(){
'use strict';
angular
.module('payApp')
.config(config);
config.$inject = ["$routeProvider","$locationProvider"];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
template: '<home></home>',
})
.when('/listado',{
template: '<pay-invoice></pay-invoice>',
})
.otherwise({
redirectTo: '/home',
});
$locationProvider.html5Mode(true);
}
})();
I need to pass two things:
The home view, because is the very first thing i need to show.
The list view, which will be triggered by the button on the home view.
How can i do that? What other thing i need to do on the index.html? Hope you can help me.
If you are using angular-route you need to create container div in your main html file.
So instead of
<pay-Invoice></pay-Invoice>
in your index html file place a container component:
<div ng-view></div>
This will tell ngRoute that it should mount route components to this container and swich it when location changes
More about it: https://docs.angularjs.org/api/ngRoute/directive/ngView
Related
I'm building a simple Sigle Page Application with AngularJs, which retrieves data stored on a server-based application. When I try to inject the pagination directive, the application doesn't work, where it shows only the navigation bar.
I've followed this tutorial.
Moreover, the console doesn't show any error.
Below are the files where I'm trying to implement the pagination:
main.html:
<div class="page-header">
<h2 id="tables">Pagination in Angular Js</h2>
</div>
<div ng-controller="UsersList">
<table class="table striped">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Created At</th>
<!--<th>Status</th>-->
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users | itemsPerPage: pageSize" current-page="currentPage">
<td>{{user.last_name}}</td>
<td>{{user.first_name}}</td>
<td>{{user.created_at}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls boundary-links="true" max-size="10" template-url="app/main/dirPagination.tpl.html"></dir-pagination-controls>
</div>
main.js:
angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);
UsersList.$inject = ['$scope', 'userDataFactory', 'angularUtils.directives.dirPagination'];
function UsersList($scope, userDataFactory){
$scope.users = [];
$scope.currentPage = 1;
$scope.pageSize = 10;
// Get the list of users
userDataFactory.userList().then(function(response) {
$scope.users = response.data;
});
}
user-data-factory.js:
angular.module('Js-Users-App').factory('userDataFactory', userDataFactory);
function userDataFactory($http) {
return {
userList: userList
};
function userList() {
return $http.get("users.json").then(complete).catch(failed);
}
function complete(response) {
return response;
}
function failed(error) {
console.log(error.statusText);
}
}
dir-paginate is declared in the file below:
<html ng-app="Js-Users-App">
<head>
<meta charset="utf-8">
<title>Js Users</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#/" class="brand-logo">Js Users</a>
<ul class="right hide-on-med-and-down">
<li>Add</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Add</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>
<!--<script src="js/ui-bootstrap-2.5.0.min.js"></script>-->
<script src="js/dirPagination.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/main/main.js"></script>
<script type="text/javascript" src="app/user-data-factory/user-data-factory.js"></script>
</body>
</html>
And the script is located inside the js folder.
The application is running on a simple web server, started with python -m SimpleHTTPServer.
I can't find the problem. Also because I still don't know how to debug very well. Is it because the application is not loading the new directive? Thanks.
UPDATE 1
I've made a plunk to show you the project structure and the entire code: http://plnkr.co/edit/LoICEnE5nkwLDvsu7URD
ng-app shouldn't be defined on <html> element, unless proven otherwise. This can result in undesirable behaviour when jQuery is loaded.
jQuery should be loaded before Angular and other dependencies that may use of it (Materialize).
Js-Users-App module is being redefined:
angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);
This eliminates router configuration, so the application does nothing. The module should be defined once, with all module dependencies:
angular.module("Js-Users-App", ["ngRoute", 'angularUtils.directives.dirPagination'])
After that angular.module("Js-Users-App") should be used only as a getter (no second argument).
UsersList controller injects angularUtils.directives.dirPagination for no good reason, this will result in error because there's no such service - it's a directive. It should be omitted.
I am posting my code can you please whats wrong in the code.
when i click on anchor tag "contacts" it will not change the view...
i already define the to separate controllers.
Thanks In advance......):
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="scripts/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<!--<script src="scripts/angular-route.js"></script>-->
<script src="js/app.js">enter code here</script>
</head>
<body ng-app="myModule">
<h1>Welcome to ITYX</h1>
<p>Home</p>
<p>Contact</p>
<div ng-view></div>
</body>
</html>
app.js
var app =angular.module("myModule",['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/',{
templateUrl:'templates/main.html',
controller:'mainController'
}).
when('/contact',{
templateUrl:'templates/contact.html',
controller:'contactController'
}).
otherwise({
redirectTo:'/'
});
}]);
app.controller('mainController',function($scope){
$scope.message ="hi am in main section";
});
app.controller('contactController',function($scope){
console.log("contact controller");
$scope.message ="hi am in contact section";
});
main.html
<h1>Main Section</h1>
{{message}}
contact.html
<h1>Contact Section</h1>
{{message}}
You need to have it as,
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Welcome to ITYX</h1>
<div class="nav">
Main
Contact
</div>
</div>
</div>
</div>
DEMO
It must be your paths to either your files or angular. I've made a plunker to verify that your code works if you reference files correctly.
Plunker implementation of your code
With the only different to be:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
I am very new to AngularJS. I have made an html component which is to be reused across the whole app. Let's say this component gives out the basic info of a product. The basic structure of the HTML is as below:
<div class="visible-sm-block">
<div class="row">
<div class="col-sm-2">
<img class="img-circle img-responsive" alt="Image of product"
ng-src="{{}}"/>
</div>
<div class="col-sm-10">
<label>{{ProductName}}</label>
<p>{{CompanyName}}</p>
<p>{{ShippedTo}}</p>
</div>
</div>
</div>
The product.js file goes as:
(function() {
'use strict';
angular
.module('product')
.directive('productDetails', productDetails);
/** #ngInject */
function productDetails() {
var directive = {
restrict: 'E',
templateUrl: 'app/components/productDetails/productDetails.html'
};
return directive;
}
})();
The small HTML component would be reused across other HTML pages in the app like this:
<product-details></product-details>
Now the problem is I cannot bind data with the HTML component when it is used across my pages. The controller for those pages is in a separate folder: app/productshipping/productshipping.controller.js
I tried using ng-controller="controller_name" in the HTML component itself but no result came. :( Please help.
This is really an interesting question. The code is given below. I am developing an angular framework. So do let me know if you need any further assistance.
Product.js file as follows
"use strict";
angular.module("app",[]);
angular.module("app").controller("productController", ['$scope', function ($scope) {
}]);
angular.module("app").directive("tmHtml", function () {
return {
transclude: false,
scope: {
productName: '#',
companyName: '#',
shippedTo: '#'
},
controller: "productController",
templateUrl: "/templates/HideShow.html"
};
});
Template HTML file as follows
<html ng-app="app">
<head>
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/bootstrap.js"></script>
</head>
<body ng-controller="productController">
<div class="visible-sm-block">
<div class="row">
<div class="col-sm-2">
<img class="img-circle img-responsive" alt="Image of product" ng-src="{{}}" />
</div>
<div class="col-sm-10">
<label>{{productName}}</label>
<p>{{companyName}}</p>
<p>{{shippedTo}}</p>
</div>
</div>
</div>
</body>
</html>
How to reuse this as follows
<html ng-app="app">
<head>
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../js/Product.js"></script>
</head>
<body>
<div>
<tm-Html product-Name="Sankar" company-Name="Sankar" shipped-To="Sankar">
</tm-Html>
</div>
</body>
</html>
So I'm trying to run an Angular app with a Rails API on Chrome.
I'm trying to render very simple views from their respective controllers.
My users.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/users', {
templateUrl: '/views/users.html',
controller: 'UsersCtrl'
});
}])
.controller('UsersCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('http://localhost:3000/api/users/').success(function(data) {
$scope.users = data.users;
});
$scope.foos = ['foo', 'bar', 'baz'];
}]);
users.html view:
<div ng-controller='UsersCtrl'>
<h1>Users</h1>
<ul ng-repeat="user in users">
<li>{{user.first_name}}</li>
</ul>
<ul ng-repeat="foo in foos">
<li>{{foo}}</li>
</ul>
</div>
The users page renders fine, and I get all the data I want. But when I try to load my main page, I get nothing. No errors, just a blank screen (though the navbar and everything else I have in my index.html loads properly).
My main.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/views/main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.awesomeThings = [
'foo',
'bar',
'baz'
];
$scope.addThing = function() {
$scope.awesomeThings.push($scope.newThing);
$scope.newThing = '';
};
}]);
main.html view:
<div ng-controller="MainCtrl">
<form ng-submit='addThing()'>
<div class="form-horizontal">
<input type="text" ng-model="newThing">
<input type="submit" value="Add Thing">
</div>
</form>
<li ng-repeat='thing in awesomeThings'>
{{thing}}
</li>
<h4>Awesome things: {{awesomeThings}}</h4>
<h4>Cool things: {{coolThings}}</h4>
</div>
When I look at the inspector in the Network tab for the "/users" route, it loads users.html. This doesn't happen for the "/" route. I expect it to load main.html, but I get nothing.
The strange thing is, when I copy all of my code from my main.js and just throw it into my users.js, everything works fine. This told me maybe I wasn't loading it properly into the index.html page, but it seems to me that I am.
index.html:
(scripts are at the bottom)
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="rantlyApp">
<header class='nav-header' role='navigation'>
<div class='content'>
<a class="navbar-brand" href="#/">Rantly</a>
<nav>
Rants
Users
Styleguide
Sign Up
</nav>
</div>
</header>
<div class="container">
<div ng-view=""></div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/users.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
</html>
I'm extremely new to Angular so it's quite possible I'm missing a fundamental step in setting up the controllers. Since my code works based purely off of which file I have it in, I have a feeling I'm not configuring something properly in Angular.
Any help is greatly appreciated. Thanks!
When you write
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
You are creating a new module called rantlyApp and removing any old module with the same name. So when the users.js script runs it overwrites what you defined in main.js.
Instead define your module once, and retrieve it with:
var rantlyApp = angular.module('rantlyApp');
Check the documentation.
my angular directive template is not getting loaded into my app. The js file for the directive is loading fine except the html. I checked the 'net' tab in firebug and its not getting called there either. I am currently not getting any errors.
Here is my directive js:
angular.module('Grid')
.directive('grid', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '='
},
templateUrl: 'scripts/grid/grid.html'
}
});
Here is my directive html:
<div id="game">
<div class="grid-container">
<div class="grid-cell" ng-repeat="cell in ngModel.grid track by $index"></div>
</div>
<div class="tile-container">
<div tile ng-model="tile" ng-repeat="tile in ngModel.tiles track by $index"></div>
</div>
finally here is my index.html where it is meant to go
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2048</title>
<link rel="stylesheet" type="text/css" href="styles/game.css" />
<script type="application/javascript" src="scripts/libraries/angularjs.js" ></script>
<script type="application/javascript" src="scripts/app.js"></script>
<script type="application/javascript" src="scripts/game/game.js"></script>
<script type="application/javascript" src="scripts/grid/grid.js"></script>
<script type="application/javascript" src="scripts/grid/grid_directive.js"></script>
</head>
<body ng-app="twentyApp">
<!-- header -->
<div class="container" ng-include="'views/main.html'"></div>
<!-- script tags -->
<div id="game-controller">
<div grid ng-model="ctrl.game" class="row"></div>
</div>
</body>
</html>
This has app is being broken up into multiple modules as the new recommended structure for angular
The grid module needs to be a dependency of your twentyApp module.
angular.module('twentyApp', ['grid'])
Are you sure that the Grid module is being loaded?
Try this:
angular.module('Grid', [])
.directive('grid', function() {