Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to add AngularJS in Django framework?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 8.15k
    Comment on it

    In Django framework first, create a project and then setup all file in Django server. Follow these steps given below

    Step1- First, create a project in Django using the link given below and setup database in setting.py file.

    http://findnerd.com/account#url=/list/view/How-to-create-project-in-dijango-1-4/15788/

    Step2- Then create views.py file in your project. use below code

    from django.shortcuts import render
    from django.conf import settings
    import psycopg2
    # Create your views here.
    def home(request):
        return render(request, 'main.html', {'STATIC_URL': settings.STATIC_URL})

     

    Step3: Then create templates file in a static folder and then in this template folder create main.html file path like this static -> angularapp -> HTML folder.

    <!DOCTYPE html>
    {% load staticfiles %}
    <html lang="en">
    <head>
        <title>AngularJS Routes example</title>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
       
         {% load staticfiles %}
         <link rel="stylesheet" type="text/css" href="{% static 'angularapp/css/style.css' %}" />
        <script src="{% static "angularapp/js/app.js" %}"></script>
    </head>
    <body ng-app="sampleApp">
    <div ng-controller="MainCtrl">
      <div class="container" id="header">
        <li>
          <a href="javascript:;" class="default_t_color" style="text-decoration:none;">Welcome visitor,</a>
    
           <img src="{% static "angularapp/m1.png" %}" alt="My image" style="text-decoration:none; height: "40px" ; width= "40px" "/>
    
          <a href="javascript:;" ng-click="toggleModal()" class="btn btn-default" onclick="LoginForm();" class="default_t_color" style="text-decoration:none; color:#ed194c;">Log In</a>
          <a href="javascript:;" class="default_t_color" style="text-decoration:none;">or,</a>  
           
          <a href="javascript:;" onclick="SignForm();" class="default_t_color" style="text-decoration:none; color:#ed194c; ">Create an Account</a>
        </li>
      </div>
      <modal title="Login form" visible="showModal">
          <form role="form">
            <div class="form-group">
              <label for="email">Email address</label>
              <input type="email" class="form-control" id="email" placeholder="Enter email" />
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" id="password" placeholder="Password" />
            </div>
            <div id="formm">
            <button type="submit" class="btn btn-default" style="text-decoration:none; color:white; background-color: red; ">Submit</button>
    
            <a href="javascript:;" onclick="SignForm();" class="default_t_color">Forgat Password</a>
            </div>
            <div id="formm1">
            <button type="submit" class="btn btn-default" >Cloase</button>
            <button type="submit" class="btn btn-default" style="text-decoration:none; color:white; background-color: blue; ">Create An Account</button>
            </div>
          </form>
        </modal>
    </div>
     <div id="nav">
        <a href="#/aboutus">AboutUs</a><br/>
        <a href="#/contact">Contact</a><br/>
    </div>
    <div id="section">
      <div ng-view></div>
      <script>
      var static_url = '{{STATIC_URL}}'
      </script>
    </div>
          <div id="footer">
          Copyright  EvonTechnology.com
          </div>
    </body>
    </html>
    

     

    Step4- Now setup angularjs file in static folder like: test.js file and pass this file in the main.html file, the path should be like: static -> angularapp -> js folder. Use this code shown below

    ar module = angular.module("sampleApp", ['ngRoute']);
    /*module.config(function ($interpolateProvider) {
        $interpolateProvider.startSymbol('[[').endSymbol(']]');
    })*/
    module.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/contact', {
                    templateUrl: static_url + 'angularapp/html/test1.html',
                    controller: 'RouteController1'
                }).
                when('/aboutus', {
                    templateUrl: static_url + 'angularapp/html/test2.html',
                    controller: 'RouteController2'
                }).
                otherwise({
                    redirectTo: '/'
                });
        }]);
    module.controller('MainCtrl', function ($scope) {
        $scope.showModal = false;
        $scope.toggleModal = function(){
            $scope.showModal = !$scope.showModal;
        };
      });
    module.directive('modal', function () {
        return {
          template: '<div class="modal fade">' + 
              '<div class="modal-dialog">' + 
                '<div class="modal-content">' + 
                  '<div class="modal-header">' + 
                    '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
                    '<h4 class="modal-title">{{ title }}</h4>' + 
                  '</div>' + 
                  '<div class="modal-body" ng-transclude></div>' + 
                '</div>' + 
              '</div>' + 
            '</div>',
          restrict: 'E',
          transclude: true,
          replace:true,
          scope:true,
          link: function postLink(scope, element, attrs) {
            scope.title = attrs.title;
    
            scope.$watch(attrs.visible, function(value){
              if(value == true)
                $(element).modal('show');
              else
                $(element).modal('hide');
            });
    
            $(element).on('shown.bs.modal', function(){
              scope.$apply(function(){
                scope.$parent[attrs.visible] = true;
              });
            });
    
            $(element).on('hidden.bs.modal', function(){
              scope.$apply(function(){
                scope.$parent[attrs.visible] = false;
              });
            });
          }
        };
      });
    

     

    Step5- Now creatHTMLml file like: static -> angularapp -> HTML folder then create file test1.html and test.html and just use this code in both file show in below

    <div class="formm1">
    Contact form
    </div>

     

    Step6- In a last step, create CSS file like path static -> angularapp -> CSS folder and create style.css file and use this code shown below

    #header {
        background-color:white;
        color:white;
        text-align:left;
        float: left;
        padding:5px;    
        width: 1290px;
        border-bottom: 4px solid Red;
    }
    #nav {
        line-height:20px;
        background-color:#eeeeee;
        height:599px;
        width:100px;
        float:left;
        padding:5px;
    }
    #section {
        width:350px;
        float:left;
        padding:10px;
    }
    #footer {
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        padding:5px;
    }
    #formm{
        border-bottom: 3px solid Red;
        margin-top: 20px;
        text-align:right;
    }
    #formm1{
        text-align:left;
        color: black;
    }
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: