AngularJS и JQuery вместе

В проекте я делаю я хочу использовать некоторые JQuery с угловым 1.4 ... в логине приложения, у меня есть это:AngularJS и JQuery вместе

$(document).ready(function() { 
 
    
 
    var animating = false, 
 
     submitPhase1 = 1100, 
 
     submitPhase2 = 400, 
 
     logoutPhase1 = 800, 
 
     $login = $(".login"), 
 
     $app = $(".app"); 
 
    
 
    function ripple(elem, e) { 
 
    $(".ripple").remove(); 
 
    var elTop = elem.offset().top, 
 
     elLeft = elem.offset().left, 
 
     x = e.pageX - elLeft, 
 
     y = e.pageY - elTop; 
 
    var $ripple = $("<div class='ripple'></div>"); 
 
    $ripple.css({top: y, left: x}); 
 
    elem.append($ripple); 
 
    }; 
 
    
 
    $(document).on("click", ".login__submit", function(e) { 
 
    if (animating) return; 
 
    animating = true; 
 
    var that = this; 
 
    ripple($(that), e); 
 
    $(that).addClass("processing"); 
 
    setTimeout(function() { 
 
     $(that).addClass("success"); 
 
     setTimeout(function() { 
 
     $app.show(); 
 
     $app.css("top"); 
 
     $app.addClass("active"); 
 
     }, submitPhase2 - 70); 
 
     setTimeout(function() { 
 
     $login.hide(); 
 
     $login.addClass("inactive"); 
 
     animating = false; 
 
     $(that).removeClass("success processing"); 
 
     }, submitPhase2); 
 
    }, submitPhase1); 
 
    }); 
 
    
 
    $(document).on("click", ".app__logout", function(e) { 
 
    if (animating) return; 
 
    $(".ripple").remove(); 
 
    animating = true; 
 
    var that = this; 
 
    $(that).addClass("clicked"); 
 
    setTimeout(function() { 
 
     $app.removeClass("active"); 
 
     $login.show(); 
 
     $login.css("top"); 
 
     $login.removeClass("inactive"); 
 
    }, logoutPhase1 - 120); 
 
    setTimeout(function() { 
 
     $app.hide(); 
 
     animating = false; 
 
     $(that).removeClass("clicked"); 
 
    }, logoutPhase1); 
 
    }); 
 
    
 
});

*, *:before, *:after { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    font-size: 62.5%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
@media (max-width: 768px) { 
 
    html, body { 
 
    font-size: 40%; 
 
    } 
 
} 
 

 
svg { 
 
    display: inline-block; 
 
    width: 2rem; 
 
    height: 2rem; 
 
    overflow: visible; 
 
} 
 

 
.svg-icon { 
 
    cursor: pointer; 
 
} 
 
.svg-icon path { 
 
    stroke: rgba(255, 255, 255, 0.9); 
 
    fill: none; 
 
    stroke-width: 1; 
 
} 
 

 
input, button { 
 
    outline: none; 
 
    border: none; 
 
} 
 

 
.cont { 
 
    position: relative; 
 
    height: 100%; 
 
    background-image: url("http://i.imgur.com/UP7fWfg.jpg"); 
 
    background-size: cover; 
 
    overflow: auto; 
 
    font-family: "Open Sans", Helvetica, Arial, sans-serif; 
 
} 
 

 
.demo { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -15rem; 
 
    margin-top: -26.5rem; 
 
    width: 30rem; 
 
    height: 53rem; 
 
    overflow: hidden; 
 
} 
 

 
.login { 
 
    position: relative; 
 
    height: 100%; 
 
    background: -webkit-linear-gradient(top, rgba(146, 135, 187, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%); 
 
    background: linear-gradient(to bottom, rgba(146, 135, 187, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%); 
 
    -webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25); 
 
      transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25); 
 
    -webkit-transform: scale(1); 
 
     -ms-transform: scale(1); 
 
      transform: scale(1); 
 
} 
 
.login.inactive { 
 
    opacity: 0; 
 
    -webkit-transform: scale(1.1); 
 
     -ms-transform: scale(1.1); 
 
      transform: scale(1.1); 
 
} 
 
.login__check { 
 
    position: absolute; 
 
    top: 16rem; 
 
    left: 13.5rem; 
 
    width: 14rem; 
 
    height: 2.8rem; 
 
    background: #fff; 
 
    -webkit-transform-origin: 0 100%; 
 
     -ms-transform-origin: 0 100%; 
 
      transform-origin: 0 100%; 
 
    -webkit-transform: rotate(-45deg); 
 
     -ms-transform: rotate(-45deg); 
 
      transform: rotate(-45deg); 
 
} 
 
.login__check:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 100%; 
 
    width: 2.8rem; 
 
    height: 5.2rem; 
 
    background: #fff; 
 
    box-shadow: inset -0.2rem -2rem 2rem rgba(0, 0, 0, 0.2); 
 
} 
 
.login__form { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 50%; 
 
    padding: 1.5rem 2.5rem; 
 
    text-align: center; 
 
} 
 
.login__row { 
 
    height: 5rem; 
 
    padding-top: 1rem; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
} 
 
.login__icon { 
 
    margin-bottom: -0.4rem; 
 
    margin-right: 0.5rem; 
 
} 
 
.login__icon.name path { 
 
    stroke-dasharray: 73.50196075439453; 
 
    stroke-dashoffset: 73.50196075439453; 
 
    -webkit-animation: animatePath 2s 0.5s forwards; 
 
      animation: animatePath 2s 0.5s forwards; 
 
} 
 
.login__icon.pass path { 
 
    stroke-dasharray: 92.10662841796875; 
 
    stroke-dashoffset: 92.10662841796875; 
 
    -webkit-animation: animatePath 2s 0.5s forwards; 
 
      animation: animatePath 2s 0.5s forwards; 
 
} 
 
.login__input { 
 
    display: inline-block; 
 
    width: 22rem; 
 
    height: 100%; 
 
    padding-left: 1.5rem; 
 
    font-size: 1.5rem; 
 
    background: transparent; 
 
    color: #FDFCFD; 
 
} 
 
.login__submit { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 4rem; 
 
    margin: 5rem 0 2.2rem; 
 
    color: rgba(255, 255, 255, 0.8); 
 
    background: #FF3366; 
 
    font-size: 1.5rem; 
 
    border-radius: 3rem; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
    -webkit-transition: width 0.3s 0.15s, font-size 0.1s 0.15s; 
 
      transition: width 0.3s 0.15s, font-size 0.1s 0.15s; 
 
} 
 
.login__submit:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -1.5rem; 
 
    margin-top: -1.5rem; 
 
    width: 3rem; 
 
    height: 3rem; 
 
    border: 2px dotted #fff; 
 
    border-radius: 50%; 
 
    border-left: none; 
 
    border-bottom: none; 
 
    -webkit-animation: rotate 0.5s infinite linear; 
 
      animation: rotate 0.5s infinite linear; 
 
    -webkit-transition: opacity 0.1s 0.4s; 
 
      transition: opacity 0.1s 0.4s; 
 
    opacity: 0; 
 
} 
 
.login__submit.processing { 
 
    width: 4rem; 
 
    font-size: 0; 
 
} 
 
.login__submit.processing:after { 
 
    opacity: 1; 
 
} 
 
.login__submit.success { 
 
    -webkit-transition: -webkit-transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s; 
 
      transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s; 
 
    -webkit-transform: scale(30); 
 
     -ms-transform: scale(30); 
 
      transform: scale(30); 
 
    opacity: 0.9; 
 
} 
 
.login__submit.success:after { 
 
    -webkit-transition: opacity 0.1s 0s; 
 
      transition: opacity 0.1s 0s; 
 
    opacity: 0; 
 
} 
 
.login__signup { 
 
    font-size: 1.2rem; 
 
    color: #ABA8AE; 
 
} 
 
.login__signup a { 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 

 
.app { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    display: none; 
 
    -webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25); 
 
      transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25); 
 
    -webkit-transform: scale(1.2); 
 
     -ms-transform: scale(1.2); 
 
      transform: scale(1.2); 
 
} 
 
.app.active { 
 
    opacity: 1; 
 
    -webkit-transform: scale(1); 
 
     -ms-transform: scale(1); 
 
      transform: scale(1); 
 
} 
 
.app.active .app__user-photo { 
 
    -webkit-transform: scale(1); 
 
     -ms-transform: scale(1); 
 
      transform: scale(1); 
 
} 
 
.app.active .app__meeting { 
 
    -webkit-transform: translateY(0); 
 
     -ms-transform: translateY(0); 
 
      transform: translateY(0); 
 
    opacity: 1; 
 
} 
 
.app.active .app__logout { 
 
    -webkit-transform: scale(1); 
 
     -ms-transform: scale(1); 
 
      transform: scale(1); 
 
} 
 
.app__top { 
 
    position: relative; 
 
    height: 28rem; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    padding: 6rem 1.5rem 2rem; 
 
    text-align: center; 
 
} 
 
.app__bot { 
 
    position: relative; 
 
    height: 25rem; 
 
    background: #fff; 
 
} 
 
.app__menu-btn { 
 
    position: absolute; 
 
    top: 2rem; 
 
    left: 1.5rem; 
 
    width: 1.8rem; 
 
    height: 1.7rem; 
 
    cursor: pointer; 
 
} 
 
.app__menu-btn span, .app__menu-btn:before, .app__menu-btn:after { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 1px; 
 
    background: rgba(255, 255, 255, 0.6); 
 
} 
 
.app__menu-btn span { 
 
    top: 0.8rem; 
 
} 
 
.app__menu-btn:before { 
 
    content: ""; 
 
    top: 0; 
 
} 
 
.app__menu-btn:after { 
 
    content: ""; 
 
    bottom: 0; 
 
} 
 
.app__icon { 
 
    position: absolute; 
 
    top: 2rem; 
 
} 
 
.app__icon.search { 
 
    right: 1.5rem; 
 
    stroke-dasharray: 61.847137451171875; 
 
    stroke-dashoffset: 61.847137451171875; 
 
    -webkit-animation: animatePath 0.5s 0.5s forwards; 
 
      animation: animatePath 0.5s 0.5s forwards; 
 
} 
 
.app__hello { 
 
    font-size: 2.2rem; 
 
    color: #fff; 
 
    font-weight: normal; 
 
    margin-bottom: 3rem; 
 
} 
 
.app__user { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 9rem; 
 
    height: 9rem; 
 
    margin-bottom: 3rem; 
 
} 
 
.app__user-photo { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    -webkit-transition: -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55); 
 
      transition: transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55); 
 
    -webkit-transform: scale(0); 
 
     -ms-transform: scale(0); 
 
      transform: scale(0); 
 
} 
 
.app__user-notif { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 3rem; 
 
    height: 3rem; 
 
    border-radius: 50%; 
 
    line-height: 3rem; 
 
    text-align: center; 
 
    background: #50D2C2; 
 
    color: #fff; 
 
    font-size: 1.5rem; 
 
} 
 
.app__month:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.app__month-name { 
 
    display: inline-block; 
 
    color: rgba(255, 255, 255, 0.6); 
 
    font-size: 1.2rem; 
 
    text-transform: uppercase; 
 
} 
 
.app__month-btn { 
 
    display: inline-block; 
 
    width: 1.2rem; 
 
    height: 1.2rem; 
 
    border: 1px solid rgba(255, 255, 255, 0.6); 
 
    border-left: none; 
 
    border-bottom: none; 
 
    cursor: pointer; 
 
} 
 
.app__month-btn.left { 
 
    float: left; 
 
    -webkit-transform: rotate(-135deg); 
 
     -ms-transform: rotate(-135deg); 
 
      transform: rotate(-135deg); 
 
} 
 
.app__month-btn.right { 
 
    float: right; 
 
    -webkit-transform: rotate(45deg); 
 
     -ms-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
} 
 
.app__days { 
 
    height: 7rem; 
 
    padding: 1.5rem 2rem; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
     -ms-flex-pack: justify; 
 
      justify-content: space-between; 
 
    -webkit-flex-wrap: wrap; 
 
     -ms-flex-wrap: wrap; 
 
      flex-wrap: wrap; 
 
} 
 
.app__day { 
 
    width: 14%; 
 
    text-align: center; 
 
    font-size: 1.2rem; 
 
} 
 
.app__day.weekday { 
 
    color: #919197; 
 
    text-transform: uppercase; 
 
} 
 
.app__day.date { 
 
    font-size: 1.2rem; 
 
    font-weight: bold; 
 
    color: #3C3C43; 
 
} 
 
.app__meeting { 
 
    position: relative; 
 
    height: 6rem; 
 
    border-top: 1px solid #EEEEEF; 
 
    padding: 1rem 2rem 1rem 7.5rem; 
 
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 
 
      transition: transform 0.3s, opacity 0.3s; 
 
    -webkit-transform: translateY(-50%); 
 
     -ms-transform: translateY(-50%); 
 
      transform: translateY(-50%); 
 
    opacity: 0; 
 
} 
 
.app__meeting:nth-child(1) { 
 
    -webkit-transition-delay: 0.2s; 
 
      transition-delay: 0.2s; 
 
} 
 
.app__meeting:nth-child(2) { 
 
    -webkit-transition-delay: 0.3s; 
 
      transition-delay: 0.3s; 
 
} 
 
.app__meeting:nth-child(3) { 
 
    -webkit-transition-delay: 0.4s; 
 
      transition-delay: 0.4s; 
 
} 
 
.app__meeting:nth-child(4) { 
 
    -webkit-transition-delay: 0.5s; 
 
      transition-delay: 0.5s; 
 
} 
 
.app__meeting:nth-child(5) { 
 
    -webkit-transition-delay: 0.6s; 
 
      transition-delay: 0.6s; 
 
} 
 
.app__meeting-photo { 
 
    position: absolute; 
 
    left: 2rem; 
 
    top: 1rem; 
 
    width: 4rem; 
 
    height: 4rem; 
 
} 
 
.app__meeting-name { 
 
    color: #000; 
 
    font-size: 1.3rem; 
 
} 
 
.app__meeting-info { 
 
    color: #949498; 
 
    font-size: 1.1rem; 
 
} 
 
.app__logout { 
 
    position: absolute; 
 
    bottom: 3.3rem; 
 
    right: 3.3rem; 
 
    width: 4.6rem; 
 
    height: 4.6rem; 
 
    margin-right: -2.3rem; 
 
    margin-bottom: -2.3rem; 
 
    background: #FC3768; 
 
    color: #fff; 
 
    font-size: 2rem; 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    -webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s, -webkit-transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s; 
 
      transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s; 
 
    -webkit-transform: scale(0); 
 
     -ms-transform: scale(0); 
 
      transform: scale(0); 
 
} 
 
.app__logout.clicked { 
 
    bottom: 50%; 
 
    right: 50%; 
 
    -webkit-transform: scale(30) !important; 
 
     -ms-transform: scale(30) !important; 
 
      transform: scale(30) !important; 
 
    opacity: 0.9; 
 
} 
 
.app__logout.clicked svg { 
 
    opacity: 0; 
 
} 
 
.app__logout-icon { 
 
    position: absolute; 
 
    width: 3rem; 
 
    height: 3rem; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -1.5rem; 
 
    margin-top: -1.5rem; 
 
    -webkit-transition: opacity 0.1s; 
 
      transition: opacity 0.1s; 
 
} 
 
.app__logout-icon path { 
 
    stroke-width: 4px; 
 
    stroke-dasharray: 64.36235046386719; 
 
    stroke-dashoffset: 64.36235046386719; 
 
    -webkit-animation: animatePath 0.5s 0.5s forwards; 
 
      animation: animatePath 0.5s 0.5s forwards; 
 
} 
 

 
.ripple { 
 
    position: absolute; 
 
    width: 15rem; 
 
    height: 15rem; 
 
    margin-left: -7.5rem; 
 
    margin-top: -7.5rem; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    -webkit-transform: scale(0); 
 
     -ms-transform: scale(0); 
 
      transform: scale(0); 
 
    -webkit-animation: animRipple 0.4s; 
 
      animation: animRipple 0.4s; 
 
    border-radius: 50%; 
 
} 
 

 
@-webkit-keyframes animRipple { 
 
    to { 
 
    -webkit-transform: scale(3.5); 
 
      transform: scale(3.5); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes animRipple { 
 
    to { 
 
    -webkit-transform: scale(3.5); 
 
      transform: scale(3.5); 
 
    opacity: 0; 
 
    } 
 
} 
 
@-webkit-keyframes rotate { 
 
    to { 
 
    -webkit-transform: rotate(360deg); 
 
      transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes rotate { 
 
    to { 
 
    -webkit-transform: rotate(360deg); 
 
      transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes animatePath { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes animatePath { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cont"> 
 
    <div class="demo"> 
 
    <div class="login"> 
 
     <div class="login__check"></div> 
 
     <div class="login__form"> 
 
     <div class="login__row"> 
 
      <svg class="login__icon name svg-icon" viewBox="0 0 20 20"> 
 
      <path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" /> 
 
      </svg> 
 
      <input type="text" class="login__input name" placeholder="Username"/> 
 
     </div> 
 
     <div class="login__row"> 
 
      <svg class="login__icon pass svg-icon" viewBox="0 0 20 20"> 
 
      <path d="M0,20 20,20 20,8 0,8z M10,13 10,16z M4,8 a6,8 0 0,1 12,0" /> 
 
      </svg> 
 
      <input type="password" class="login__input pass" placeholder="Password"/> 
 
     </div> 
 
     <button type="button" class="login__submit">Sign in</button> 
 
     <p class="login__signup">Don't have an account? &nbsp;<a>Sign up</a></p> 
 
     </div> 
 
    </div> 
 
    <div class="app"> 
 
     <div class="app__top"> 
 
     <div class="app__menu-btn"> 
 
      <span></span> 
 
     </div> 
 
     <svg class="app__icon search svg-icon" viewBox="0 0 20 20"> 
 
      <!-- yeap, its purely hardcoded numbers straight from the head :D (same for svg above) --> 
 
      <path d="M20,20 15.36,15.36 a9,9 0 0,1 -12.72,-12.72 a 9,9 0 0,1 12.72,12.72" /> 
 
     </svg> 
 
     <p class="app__hello">Good Morning!</p> 
 
     <div class="app__user"> 
 
      <img src="http://i.imgur.com/joyWJEY.jpg" alt="" class="app__user-photo" /> 
 
      <span class="app__user-notif">3</span> 
 
     </div> 
 
     <div class="app__month"> 
 
      <span class="app__month-btn left"></span> 
 
      <p class="app__month-name">March</p> 
 
      <span class="app__month-btn right"></span> 
 
     </div> 
 
     </div> 
 
     <div class="app__bot"> 
 
     <div class="app__days"> 
 
      <div class="app__day weekday">Sun</div> 
 
      <div class="app__day weekday">Mon</div> 
 
      <div class="app__day weekday">Tue</div> 
 
      <div class="app__day weekday">Wed</div> 
 
      <div class="app__day weekday">Thu</div> 
 
      <div class="app__day weekday">Fri</div> 
 
      <div class="app__day weekday">Sad</div> 
 
      <div class="app__day date">8</div> 
 
      <div class="app__day date">9</div> 
 
      <div class="app__day date">10</div> 
 
      <div class="app__day date">11</div> 
 
      <div class="app__day date">12</div> 
 
      <div class="app__day date">13</div> 
 
      <div class="app__day date">14</div> 
 
     </div> 
 
     <div class="app__meetings"> 
 
      <div class="app__meeting"> 
 
      <img src="http://i.imgur.com/joyWJEY.jpg" alt="" class="app__meeting-photo" /> 
 
      <p class="app__meeting-name">Feed the cat</p> 
 
      <p class="app__meeting-info"> 
 
       <span class="app__meeting-time">8 - 10am</span> 
 
       <span class="app__meeting-place">Real-life</span> 
 
      </p> 
 
      </div> 
 
      <div class="app__meeting"> 
 
      <img src="http://i.imgur.com/joyWJEY.jpg" alt="" class="app__meeting-photo" /> 
 
      <p class="app__meeting-name">Feed the cat!</p> 
 
      <p class="app__meeting-info"> 
 
       <span class="app__meeting-time">1 - 3pm</span> 
 
       <span class="app__meeting-place">Real-life</span> 
 
      </p> 
 
      </div> 
 
      <div class="app__meeting"> 
 
      <img src="http://i.imgur.com/joyWJEY.jpg" alt="" class="app__meeting-photo" /> 
 
      <p class="app__meeting-name">FEED THIS CAT ALREADY!!!</p> 
 
      <p class="app__meeting-info"> 
 
       <span class="app__meeting-time">This button is just for demo ></span> 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="app__logout"> 
 
     <svg class="app__logout-icon svg-icon" viewBox="0 0 20 20"> 
 
      <path d="M6,3 a8,8 0 1,0 8,0 M10,0 10,12"/> 
 
     </svg> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Я уже настроил угловое приложение, уже создал маршруты (ui-route), но при открытии логина входа я ничего не вижу, никаких ошибок в консоли, пустой страницы ...

Я загружаю библиотеку jQuery и jquery скрипт перед угловым.

Что я должен сделать, чтобы получить тот же результат с помощью Угловая ?, в угловых Docs говорит:

Угловая можно использовать JQuery, если он присутствует в вашем приложении, когда приложение только загружается. Если jQuery отсутствует в вашем пути к скрипту, Angular возвращается к своей реализации подмножества jQuery, которое мы называем jQLite.

Так что случилось !? что нужно сделать, чтобы этот фрагмент работал в моем приложении «Угловое приложение», мне нужно взять код jquery на контроллер? если да, то как?

источник

2015-07-18 Jonathan Solorzano

оказывается, что этот HTML может быть шаблоном годовых GE? Вы отмечаете, что JQuery загружается до углового, но у вас есть тег сценария для JQuery в качестве первой строки в этом HTML-шаблоне, который не будет работать правильно. – Claies

'document.ready' довольно бесполезен в угловом приложении с маршрутизацией, за исключением очень маленького html, который может существовать в индексе. Поместите этот код в директивы, чтобы элементы существовали при его запуске. – charlietfl

Также обратите внимание, что попытка наложения углов поверх страниц jQuery также полностью обратная, и они будут представлять значительные проблемы, а не получать угловой ход и при необходимости вставлять jQuery в него. Большинство из того, что у вас есть в вашем jQuery, не понадобятся, если использование углового правильно – charlietfl

Ваш код должен быть полностью переписан в директивы для правильного использования jQuery для манипуляций с DOM (что похоже на то, что все ваши шаблоны - это некоторые базовые манипуляции с DOM). http://www.bennadel.com/blog/2752-using-jquery-instead-of-jqlite-in-angularjs.htm - отличный ресурс о том, как правильно использовать jQuery в ваших модулях Angular (если вы все еще хотите это сделать).

Ваш код не является модульным в способе, которым является AngularJS, для достижения этой же цели в угловом режиме он выглядит совершенно другим. Вы бы такие задачи, как:

function ripple(elem, e) { 
    $(".ripple").remove(); 
    var elTop = elem.offset().top, 
     elLeft = elem.offset().left, 
     x = e.pageX - elLeft, 
     y = e.pageY - elTop; 
    var $ripple = $("<div class='ripple'></div>"); 
    $ripple.css({top: y, left: x}); 
    elem.append($ripple); 
    };

бы вместо того, чтобы выглядеть следующим образом:

** не может реально работать проверялось, но это подход **

app.directive('ripple', function() { 
    return { 
    restrict: 'E', 
    link: function(elm){ 

    function ripple(elm, e) { 
     var event = e; 
     var elem = $(elm); 
     $(".ripple").remove(); 
     var elTop = elem.offset().top, 
     elLeft = elem.offset().left, 
     x = e.pageX - elLeft, 
     y = e.pageY - elTop; 
     var $ripple = $("<div class='ripple'></div>"); 
     $ripple.css({top: y, left: x}); 
     elem.append($ripple); 

    } 
    elm.onclick = function(event){ 
     ripple(elm, event); 
    }; 
    }, 

    }; 
});

вызова в действие после первой загрузки JQuery, то Угловая:

<button data-ripple>Click Me!</button>

источник

2015-07-18 22:10:42

Ммм, я не работал с jQuery, чтобы переписать его код в директиву, я знаю, что блог, к которому вы обращались, является примером, но не могли бы вы объяснить, что он переписывает что-то из фрагмента? –

Хотя код выше МОЖЕТ работать ... вы действительно не должны делать этого таким образом, вместо этого весь ваш модуль будет на самом деле структурирован другим. Вы использовали бы $ timeout вместо функции window.timeout, используемой вами и т. Д. –

Вы не можете ожидать, что кто-либо перепишет весь этот код для вас, это не то, о чем речь. Объяснение, которое я имею выше, должно быть достаточно всеобъемлющим, чтобы понять. Если вы не знаете jQuery, и вы не знаете AngularJS, то это не будет очень прямо для вас. –

AngularJS и JQuery вместе

ответ

Смежные вопросы